/* ================================================================
경기도교습소연합회 — 사용자 사이트 디자인
모티브: 서울디자인재단(SDF) 미니멀 + 타이포그래피 주도
폰트: Pretendard
================================================================ */
/* === 디자인 토큰 ============================================== */
:root {
--c-black: #0a0a0a;
--c-white: #ffffff;
--c-bg: #ffffff;
--c-bg2: #f5f5f5;
--c-line: #e5e5e5;
--c-text: #0a0a0a;
--c-muted: #6b6b6b;
--c-light: #999999;
--c-brand: #1e3a8a; /* 협의회 정체성용 (절제) */
--c-accent: #06b6d4;
--container: 1280px;
--side-pad: clamp(20px, 4vw, 60px);
--section-pad: clamp(60px, 8vw, 120px);
--font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
system-ui, 'Malgun Gothic', '맑은 고딕', sans-serif;
}
/* === Reset / Base ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
color: var(--c-text);
background: var(--c-bg);
/* 기본 폰트 18px — 데스크톱·태블릿·모바일에서 읽기 편한 크기 */
font-size: 18px;
line-height: 1.6;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; /* iOS landscape 회전 시 폰트 자동확대 방지 */
text-size-adjust: 100%;
/* iPhone X+ 노치/홈 인디케이터 영역 안전 보호 */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .15s; }
a:hover { opacity: 0.7; }
button { font-family: inherit; cursor: pointer; }
/* === 컨테이너 / 섹션 ========================================== */
/*
* 본문 컨텐츠 너비 정책:
* - 데스크톱: 화면의 70% (좌우 15% 여백)
* - 992px 이하: 기존 var(--side-pad) 폴백 (모바일/태블릿)
* ※ max-width 제한 없음 - 큰 모니터에서도 70% 유지
*/
.container {
max-width: none;
margin: 0;
padding: 0 15%;
}
@media (max-width: 992px) {
.container { padding: 0 var(--side-pad); }
}
section { padding: var(--section-pad) 0; }
/* === 타이포 (서울디자인 스타일 — 큰 헤드라인) ==================== */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0; }
.h-display { font-size: clamp(40px, 6vw, 88px); font-weight: 800; }
.h-section {
font-size: clamp(32px, 4vw, 56px);
font-weight: 800;
letter-spacing: -0.04em;
margin-bottom: 50px;
}
.h-section .en {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 10px;
}
/* === 헤더 (메가메뉴) ========================================== */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--c-white);
}
.site-header .header-row {
border-bottom: 1px solid var(--c-line);
position: relative;
z-index: 2;
background: var(--c-white);
}
.site-header .header-flex {
display: flex; align-items: center;
height: 80px;
max-width: none;
margin: 0;
padding: 0 15%;
}
@media (max-width: 992px) {
.site-header .header-flex { padding: 0 var(--side-pad); }
}
/* 로고 영역 (고정 너비) */
.site-header .brand {
width: 320px; flex-shrink: 0;
display: flex; align-items: center; gap: 12px;
font-size: 22px; font-weight: 800;
letter-spacing: -0.03em;
color: var(--c-text);
text-decoration: none;
}
.site-header .brand .brand-mark-img {
width: 50px; height: 50px;
object-fit: contain;
display: block;
}
/* 레거시 텍스트 마크 (호환성 — 로고 이미지 없을 때) */
.site-header .brand .brand-mark {
width: 36px; height: 36px;
background: var(--c-text);
color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 800;
border-radius: 4px;
}
.site-header .brand .brand-text {
font-size: 22px;
white-space: nowrap;
}
.site-header .brand:hover { opacity: 1; }
/* GNB — 균등 분할 */
.site-header .gnb { flex: 1; }
.site-header .gnb-top {
display: flex;
list-style: none;
margin: 0; padding: 0;
justify-content: space-around;
}
.site-header .gnb-top > li {
flex: 1;
text-align: center;
position: relative;
}
.site-header .gnb-top > li > a {
display: block;
padding: 28px 8px;
font-size: 20px; font-weight: 600;
color: var(--c-text);
letter-spacing: -0.02em;
}
.site-header .gnb-top > li > a:hover { opacity: 1; color: var(--c-brand); }
.site-header .gnb-top > li::after {
content: '';
position: absolute; left: 50%; bottom: 0;
width: 0; height: 3px;
background: var(--c-text);
transform: translateX(-50%);
transition: width .25s;
}
.site-header .gnb-top > li:hover::after { width: 60%; }
/* 우측 액션 (고정 너비) */
.site-header .actions {
width: 280px; flex-shrink: 0;
display: flex; align-items: center; justify-content: flex-end; gap: 16px;
font-size: 13px;
}
.site-header .actions a { color: var(--c-muted); }
.site-header .actions a:hover { color: var(--c-text); opacity: 1; }
.site-header .actions .lang { display: flex; gap: 6px; align-items: center; font-weight: 500; }
.site-header .actions .lang .active { color: var(--c-text); font-weight: 700; }
.site-header .actions .lang span { color: var(--c-line); }
.site-header .actions .me-name { color: var(--c-text); font-weight: 600; }
.site-header .actions .login-btn {
background: var(--c-text); color: var(--c-white) !important;
padding: 9px 22px; border-radius: 4px; font-weight: 700; font-size: 13px;
letter-spacing: -0.01em;
}
.site-header .actions .login-btn:hover { background: #333; opacity: 1; }
/* ── 블로그 바로가기 — 마젠타 박스 (KR/EN 자리 대체) ── */
.site-header .actions .blog-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: linear-gradient(135deg, #c026d3 0%, #d946ef 100%);
color: #fff !important;
border-radius: 4px;
font-weight: 700; font-size: 13px;
letter-spacing: -0.01em;
text-decoration: none;
transition: background .15s, transform .15s, box-shadow .15s;
box-shadow: 0 2px 8px -2px rgba(192, 38, 211, .45);
}
.site-header .actions .blog-btn:hover {
background: linear-gradient(135deg, #a21caf 0%, #c026d3 100%);
color: #fff !important;
opacity: 1;
transform: translateY(-1px);
box-shadow: 0 4px 14px -2px rgba(192, 38, 211, .65);
}
.site-header .actions .blog-btn svg { flex-shrink: 0; }
@media (max-width: 768px) {
.site-header .actions .blog-btn { padding: 8px 12px; font-size: 12px; }
.site-header .actions .blog-btn svg { width: 12px; height: 12px; }
.site-header .actions .blog-btn span { display: none; } /* 모바일은 아이콘만 */
}
.site-header .hamburger { display: none; background: none; border: 0; padding: 8px; color: var(--c-text); }
.site-header .hamburger svg { width: 26px; height: 26px; }
/* ★ 메가메뉴 패널 — 헤더 hover 시 펼쳐짐 */
.mega-bg {
position: absolute;
top: 100%; left: 0; right: 0;
background: var(--c-white);
border-top: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
box-shadow: 0 8px 24px rgba(0,0,0,.05);
max-height: 0;
overflow: hidden;
transition: max-height .28s ease;
z-index: 1;
}
.site-header:hover .mega-bg,
.site-header:focus-within .mega-bg {
max-height: 360px;
}
.mega-flex {
display: flex;
align-items: stretch;
max-width: none;
margin: 0;
padding: 28px 15% 32px;
}
@media (max-width: 992px) {
.mega-flex { padding: 28px var(--side-pad) 32px; }
}
.mega-spacer-left { width: 280px; flex-shrink: 0; }
.mega-spacer-right { width: 280px; flex-shrink: 0; }
.mega-cols {
display: flex;
flex: 1;
list-style: none;
margin: 0; padding: 0;
}
.mega-cols > li {
flex: 1;
text-align: center;
padding: 0 6px;
border-right: 1px dashed var(--c-line);
}
.mega-cols > li:last-child { border-right: 0; }
.mega-cols > li a {
display: block;
padding: 8px 4px;
font-size: 18px; font-weight: 500;
color: var(--c-muted);
letter-spacing: -0.01em;
border-radius: 3px;
transition: all .15s;
}
.mega-cols > li a:hover {
background: var(--c-bg2);
color: var(--c-text);
font-weight: 700;
opacity: 1;
}
@media (max-width: 992px) {
.site-header .gnb,
.site-header .actions .lang,
.site-header .actions .me-name,
.site-header .actions a:not(.login-btn) { display: none; }
.site-header .hamburger {
display: block; margin-left: 8px;
min-width: 44px; min-height: 44px; /* 터치 타깃 보장 */
display: flex; align-items: center; justify-content: center;
}
.site-header .hamburger svg { width: 28px; height: 28px; }
.mega-bg { display: none; }
.site-header .brand { width: auto; flex: 1; font-size: 18px; }
.site-header .brand .brand-text { font-size: 18px; }
.site-header .brand .brand-mark { width: 38px; height: 38px; font-size: 18px; }
.site-header .brand .brand-mark-img { width: 42px; height: 42px; }
.site-header .actions { width: auto; gap: 10px; }
.site-header .actions .login-btn {
padding: 11px 18px;
font-size: 14px;
min-height: 44px;
display: flex; align-items: center;
}
.site-header .header-flex { height: 64px; }
}
@media (max-width: 480px) {
.site-header .brand .brand-text { font-size: 16px; }
.site-header .brand .brand-mark { width: 34px; height: 34px; font-size: 16px; }
.site-header .brand .brand-mark-img { width: 36px; height: 36px; }
.site-header .actions .login-btn { padding: 10px 14px; font-size: 13px; }
}
/* === 핵심 아이콘 그리드 (운영시설 6개 스타일) ==================== */
.icon-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
}
.icon-grid a {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 36px 16px;
border-right: 1px solid var(--c-line);
text-align: center;
transition: background .2s;
color: var(--c-text);
}
.icon-grid a:last-child { border-right: 0; }
.icon-grid a:hover { background: var(--c-bg2); opacity: 1; }
.icon-grid .ico {
width: 48px; height: 48px;
margin-bottom: 12px;
display: flex; align-items: center; justify-content: center;
}
.icon-grid .ico svg { width: 100%; height: 100%; stroke: var(--c-text); fill: none; stroke-width: 1.6; }
.icon-grid .label { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.icon-grid .desc { font-size: 11px; color: var(--c-muted); margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 992px) {
.icon-grid { grid-template-columns: repeat(3, 1fr); }
.icon-grid a { padding: 24px 8px; border-bottom: 1px solid var(--c-line); }
.icon-grid a:nth-child(3n) { border-right: 0; }
}
@media (max-width: 480px) {
.icon-grid { grid-template-columns: repeat(2, 1fr); }
.icon-grid a:nth-child(3n) { border-right: 1px solid var(--c-line); }
.icon-grid a:nth-child(2n) { border-right: 0; }
}
/* === 메인 슬라이더 (Swiper, 서울디자인 톤) ===================== */
.hero {
background: var(--c-bg2);
padding: 0;
}
.hero .swiper {
width: 100%;
height: clamp(540px, 86vh, 880px);
height: clamp(540px, 86dvh, 880px); /* iOS Safari 주소창 변동 시 흔들림 방지 (dvh 지원 브라우저만 덮어쓰기) */
}
.hero .slide {
position: relative;
display: flex; align-items: center;
background-size: cover; background-position: center;
color: var(--c-white);
overflow: hidden;
}
.hero .slide::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.15) 100%);
}
.hero .slide-inner {
position: relative; z-index: 1;
max-width: none; margin: 0;
padding: 0 15%; /* 본문 컨텐츠와 동일: 좌우 15% 여백 */
width: 100%;
}
@media (max-width: 992px) {
.hero .slide-inner { padding: 0 var(--side-pad); }
}
.hero .slide .num {
display: inline-block;
font-size: 13px; font-weight: 700;
letter-spacing: 0.2em;
margin-bottom: 18px;
opacity: 0.85;
}
.hero .slide .num::before { content: '— '; }
.hero .slide .tag {
display: inline-block;
font-size: 12px; font-weight: 600;
letter-spacing: 0.2em;
padding: 6px 14px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.5);
margin-bottom: 26px;
text-transform: uppercase;
backdrop-filter: blur(4px);
}
.hero .slide h2 {
font-size: clamp(32px, 5.2vw, 64px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.15;
margin: 0 0 22px;
max-width: 720px;
}
.hero .slide p {
font-size: clamp(15px, 1.3vw, 17px);
max-width: 560px;
margin: 0 0 36px;
opacity: 0.92;
line-height: 1.6;
}
/* 슬라이드 내부 미니 통계 (3개) */
.hero .slide .slide-stats {
display: flex;
gap: 0;
margin: 36px 0;
max-width: 540px;
border-top: 1px solid rgba(255,255,255,.25);
border-bottom: 1px solid rgba(255,255,255,.25);
}
.hero .slide .ss-item {
flex: 1;
padding: 22px 16px;
text-align: left;
border-right: 1px solid rgba(255,255,255,.15);
}
.hero .slide .ss-item:last-child { border-right: 0; }
.hero .slide .ss-num {
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 6px;
}
.hero .slide .ss-lbl {
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.75;
}
@media (max-width: 768px) {
.hero .slide .slide-stats { max-width: 100%; }
.hero .slide .ss-item { padding: 14px 10px; }
}
.hero .slide .btn-cta {
display: inline-flex; align-items: center; gap: 14px;
background: var(--c-white); color: var(--c-text);
padding: 15px 32px; border-radius: 0;
font-weight: 700; font-size: 15px;
letter-spacing: -0.01em;
transition: all .25s;
}
.hero .slide .btn-cta:hover {
background: var(--c-text); color: var(--c-white);
opacity: 1;
}
/* ── 슬라이드 우측 정렬 (콘텐츠 블록을 우측 빈하늘로 이동) ── */
/* PC 한정 — 모바일은 기본 좌측 정렬 유지 (이미지 비율 다름) */
@media (min-width: 993px) {
.hero .slide.slide-right-align .slide-inner {
padding-left: 50%; /* 콘텐츠 블록 우측으로 푸시 */
padding-right: 6%;
/* 내부 텍스트는 모두 좌측 정렬 — 그대로 유지 */
}
/* 그라디언트 반전 — 우측 콘텐츠 영역의 가독성 강화 */
.hero .slide.slide-right-align::after {
background: linear-gradient(
90deg,
rgba(0, 0, 0, .15) 0%,
rgba(0, 0, 0, .22) 35%,
rgba(0, 0, 0, .55) 65%,
rgba(0, 0, 0, .75) 100%
) !important;
}
}
@media (min-width: 1400px) {
/* 매우 넓은 모니터에서는 콘텐츠가 너무 우측 끝으로 몰리지 않도록 살짝 완화 */
.hero .slide.slide-right-align .slide-inner {
padding-left: 48%;
padding-right: 8%;
}
}
/* ── 법정연수 슬라이드 타이틀 — 두 줄 강제 (긴 한국어 제목 대응) ── */
.hero .slide h2.slide-h2-train {
font-size: clamp(26px, 4.4vw, 48px) !important;
max-width: 920px !important;
letter-spacing: -.03em;
line-height: 1.25;
word-break: keep-all;
}
@media (max-width: 768px) {
.hero .slide h2.slide-h2-train { font-size: 26px !important; max-width: 100% !important; }
}
@media (max-width: 420px) {
.hero .slide h2.slide-h2-train { font-size: 22px !important; line-height: 1.3; }
}
/* ── 슬라이드 2 — AI 시대 메시지 ── */
.hero .slide .slide-ai-msg {
max-width: 640px;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.85;
margin: 0 0 32px;
word-break: keep-all;
}
.hero .slide .slide-ai-msg strong {
color: #fbbf24;
font-weight: 800;
background: rgba(251, 191, 36, .12);
padding: 1px 6px;
border-radius: 4px;
}
.hero .slide .slide-ai-msg em {
font-style: normal;
font-weight: 800;
color: #fff;
text-decoration: underline;
text-decoration-color: #fbbf24;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
@media (max-width: 768px) {
.hero .slide .slide-ai-msg { font-size: 14.5px; line-height: 1.7; }
}
/* ── 법정연수 슬라이드 — 일정 + 시군 박스 ── */
.hero .slide .slide-train-dates {
display: flex;
flex-direction: column;
gap: 8px;
margin: 24px 0 26px;
max-width: 580px;
font-size: 16px;
line-height: 1.5;
opacity: 1;
}
.hero .slide .slide-train-dates .std-row {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 18px;
background: rgba(0, 0, 0, .35);
border-left: 4px solid #fbbf24;
border-radius: 4px;
backdrop-filter: blur(4px);
}
.hero .slide .slide-train-dates .std-label {
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
color: #fbbf24;
text-transform: uppercase;
background: rgba(251, 191, 36, .15);
padding: 3px 9px;
border-radius: 4px;
}
.hero .slide .slide-train-dates .std-label-extra {
background: rgba(248, 113, 113, .2);
color: #fca5a5;
}
.hero .slide .slide-train-dates .std-value {
color: #fff;
font-size: 16px;
}
.hero .slide .slide-train-dates .std-value strong {
font-weight: 800;
letter-spacing: -.005em;
color: #fff;
}
/* 31개 시군 박스 */
.hero .slide .slide-region-box {
margin: 0 0 26px;
max-width: 640px;
padding: 16px 20px;
background: rgba(0, 0, 0, .42);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 6px;
backdrop-filter: blur(6px);
}
.hero .slide .srb-total {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.hero .slide .srb-total-label {
font-size: 13px;
font-weight: 700;
color: rgba(255, 255, 255, .7);
letter-spacing: .05em;
}
.hero .slide .srb-total-num {
font-size: 32px;
font-weight: 900;
color: #fbbf24;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.hero .slide .srb-total-unit {
font-size: 16px;
font-weight: 700;
color: #fff;
}
.hero .slide .srb-regions {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.hero .slide .srb-regions li {
display: inline-block;
padding: 4px 10px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
color: rgba(255, 255, 255, .92);
letter-spacing: -.005em;
white-space: nowrap;
transition: background .15s;
}
.hero .slide .srb-regions li:hover {
background: rgba(251, 191, 36, .2);
border-color: rgba(251, 191, 36, .35);
}
/* 모바일 */
@media (max-width: 768px) {
.hero .slide .slide-train-dates { font-size: 14px; gap: 6px; margin-bottom: 18px; }
.hero .slide .slide-train-dates .std-row { padding: 8px 12px; gap: 10px; flex-wrap: wrap; }
.hero .slide .slide-train-dates .std-label { font-size: 10px; padding: 2px 7px; }
.hero .slide .slide-train-dates .std-value { font-size: 14px; }
.hero .slide .slide-region-box { padding: 12px 14px; margin-bottom: 18px; }
.hero .slide .srb-total-num { font-size: 26px; }
.hero .slide .srb-regions li { font-size: 11.5px; padding: 3px 8px; }
}
@media (max-width: 420px) {
.hero .slide .srb-regions li { font-size: 11px; padding: 2px 7px; }
}
/* 슬라이더 컨트롤 — 우측하단 정렬 (서울디자인 스타일) */
.hero .swiper-pagination {
bottom: 30px !important;
text-align: left;
padding-left: var(--side-pad);
max-width: var(--container);
left: 50% !important; transform: translateX(-50%);
width: 100% !important;
}
.hero .swiper-pagination-bullet {
background: rgba(255,255,255,.4);
width: 40px; height: 2px; border-radius: 0;
opacity: 1;
margin: 0 4px !important;
}
.hero .swiper-pagination-bullet-active { background: var(--c-white); height: 3px; }
.hero .swiper-button-next, .hero .swiper-button-prev {
color: var(--c-white);
width: 44px; height: 44px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.3);
border-radius: 50%;
transition: all .2s;
}
.hero .swiper-button-next:hover, .hero .swiper-button-prev:hover {
background: var(--c-white); color: var(--c-text);
}
.hero .swiper-button-next::after, .hero .swiper-button-prev::after {
font-size: 14px; font-weight: 800;
}
@media (max-width: 768px) {
.hero .swiper-button-next, .hero .swiper-button-prev { display: none; }
}
/* === 핵심 수치 카운터 (메인 + 부가 정보) ====================== */
.stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--c-line);
background: var(--c-text);
color: var(--c-white);
}
.stats-bar .item {
padding: 36px 16px; text-align: center;
border-right: 1px solid rgba(255,255,255,.15);
}
.stats-bar .item:last-child { border-right: 0; }
.stats-bar .num {
font-size: clamp(32px, 4vw, 48px);
font-weight: 800; letter-spacing: -0.03em;
}
.stats-bar .lbl { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 768px) {
.stats-bar { grid-template-columns: repeat(2, 1fr); }
.stats-bar .item:nth-child(2) { border-right: 0; }
.stats-bar .item { border-bottom: 1px solid rgba(255,255,255,.15); }
}
/* === 공지/뉴스 (NEWS) ======================================== */
.news-section { background: var(--c-white); }
.news-section .head {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 50px;
}
.news-section .more {
font-size: 14px; font-weight: 600;
display: flex; align-items: center; gap: 6px;
}
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--c-line);
}
.news-card {
border-bottom: 1px solid var(--c-line);
border-right: 1px solid var(--c-line);
padding: 32px 28px;
transition: background .2s;
display: flex; flex-direction: column;
min-height: 220px;
}
.news-card:nth-child(3n) { border-right: 0; }
.news-card:hover { background: var(--c-bg2); opacity: 1; }
.news-card .meta {
display: flex; gap: 12px; font-size: 12px; color: var(--c-muted);
margin-bottom: 16px; letter-spacing: 0.05em;
}
.news-card .meta .tag {
background: var(--c-text); color: var(--c-white);
padding: 3px 10px; font-weight: 600; letter-spacing: 0.1em;
}
.news-card h3 {
font-size: 19px; font-weight: 700;
margin: 0 0 12px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
flex-grow: 1;
}
.news-card .ex { font-size: 13px; color: var(--c-muted); line-height: 1.5; }
@media (max-width: 992px) {
.news-grid { grid-template-columns: 1fr; }
.news-card { border-right: 0; }
}
/* === 사업소개 (BUSINESS) ===================================== */
.business-section { background: var(--c-bg2); }
.business-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.biz-card {
background: var(--c-white);
padding: 50px 36px;
border-right: 1px solid var(--c-line);
position: relative;
display: flex; flex-direction: column;
min-height: 320px;
transition: all .25s;
}
.biz-card:last-child { border-right: 0; }
.biz-card:hover {
background: var(--c-text);
color: var(--c-white);
}
.biz-card:hover h3, .biz-card:hover .ex, .biz-card:hover .num,
.biz-card:hover .arrow { color: var(--c-white); }
.biz-card .num {
font-size: 14px; font-weight: 700;
color: var(--c-muted);
letter-spacing: 0.1em;
margin-bottom: 20px;
}
.biz-card h3 {
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 16px;
flex-grow: 0;
}
.biz-card .ex {
font-size: 14px; color: var(--c-muted);
line-height: 1.7;
flex-grow: 1;
}
.biz-card .arrow {
margin-top: 24px;
font-size: 28px; color: var(--c-text);
transition: transform .2s;
}
.biz-card:hover .arrow { transform: translateX(8px); }
@media (max-width: 992px) {
.business-grid { grid-template-columns: 1fr; }
.biz-card { border-right: 0; border-bottom: 1px solid var(--c-line); }
}
/* === 자료실/갤러리 (ARCHIVE) ================================ */
.archive-section { background: var(--c-white); }
.archive-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.arch-card {
display: block; color: inherit;
}
.arch-card .thumb {
aspect-ratio: 4 / 3;
background: var(--c-bg2);
margin-bottom: 16px;
overflow: hidden;
position: relative;
}
.arch-card .thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .4s;
}
.arch-card:hover .thumb img { transform: scale(1.05); }
.arch-card .thumb .placeholder {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
color: var(--c-light); font-size: 36px;
}
.arch-card .meta { font-size: 12px; color: var(--c-muted); margin-bottom: 6px; letter-spacing: 0.05em; }
.arch-card h3 {
font-size: 16px; font-weight: 700;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 992px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .archive-grid { grid-template-columns: 1fr; } }
/* === 푸터 ==================================================== */
.site-footer {
background: var(--c-text);
color: rgba(255,255,255,.7);
padding-top: 60px;
}
.site-footer .top {
display: flex; flex-wrap: wrap;
border-bottom: 1px solid rgba(255,255,255,.15);
padding-bottom: 24px; gap: 32px;
font-size: 13px;
}
.site-footer .top a { color: rgba(255,255,255,.7); }
.site-footer .top a:hover { color: var(--c-white); opacity: 1; }
.site-footer .info {
padding: 40px 0 48px;
color: rgba(255,255,255,.6);
display: grid; grid-template-columns: 2fr 1fr; gap: 50px;
}
/* 좌측 — 연합회 정보 */
.site-footer .ft-org { color: rgba(255,255,255,.7); }
.site-footer .ft-logo {
font-size: 26px; font-weight: 900;
color: #fff;
letter-spacing: -0.02em;
margin-bottom: 22px;
line-height: 1.3;
}
.site-footer .ft-sub {
display: flex; flex-direction: column; gap: 10px;
}
.site-footer .ft-line {
font-size: 14px;
line-height: 1.6;
display: flex; flex-wrap: wrap; align-items: center;
gap: 4px 8px;
}
.site-footer .ft-line strong {
color: #fff;
font-weight: 700;
font-size: 13px;
background: rgba(255,255,255,0.06);
padding: 2px 10px;
border-radius: 4px;
margin-right: 4px;
}
.site-footer .ft-line a {
color: rgba(255,255,255,.85);
font-weight: 600;
}
.site-footer .ft-line a:hover { color: #fbbf24; }
.site-footer .ft-sep { margin-left: 6px; }
.site-footer .ft-hours {
font-size: 13px;
color: rgba(255,255,255,.5);
margin-left: 4px;
}
.site-footer .ft-mini-link {
margin-left: 12px;
padding: 2px 10px;
border-left: 1px solid rgba(255,255,255,.25);
font-size: 13px;
}
/* 우측 — 블로그 + FAMILY SITE */
.site-footer .ft-side {
display: flex; flex-direction: column; gap: 16px;
align-items: flex-start;
}
.site-footer .ft-blog {
display: flex; align-items: center; gap: 14px;
width: 100%; max-width: 320px;
padding: 16px 20px;
background: linear-gradient(135deg, #03c75a 0%, #20a44b 100%);
border-radius: 14px;
text-decoration: none;
color: #fff;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 8px 24px rgba(3,199,90,0.25);
}
.site-footer .ft-blog:hover {
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(3,199,90,0.45);
color: #fff;
}
.site-footer .ft-blog-ico {
flex-shrink: 0;
width: 40px; height: 40px;
background: rgba(255,255,255,0.15);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.site-footer .ft-blog-ico svg { width: 32px; height: 32px; }
.site-footer .ft-blog-text {
flex: 1;
display: flex; flex-direction: column;
line-height: 1.3;
}
.site-footer .ft-blog-text small {
font-size: 11px; font-weight: 700;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.85);
margin-bottom: 2px;
}
.site-footer .ft-blog-text strong {
font-size: 16px; font-weight: 800;
color: #fff;
}
.site-footer .ft-blog-arrow {
font-size: 22px; font-weight: 700;
transition: transform .2s;
}
.site-footer .ft-blog:hover .ft-blog-arrow { transform: translateX(4px); }
.site-footer .ft-family-h {
margin: 6px 0 0;
font-size: 14px; font-weight: 700;
color: #fff;
letter-spacing: 0.05em;
}
.site-footer .family-site {
width: 100%; max-width: 320px;
padding: 12px 16px;
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,.3);
font-size: 14px;
font-family: inherit;
border-radius: 8px;
cursor: pointer;
transition: border-color .2s;
}
.site-footer .family-site:hover {
border-color: #fbbf24;
}
.site-footer .family-site option {
background: #0f172a; color: #fff;
}
.site-footer .bottom {
border-top: 1px solid rgba(255,255,255,.15);
padding: 20px 0;
font-size: 13px; color: rgba(255,255,255,.4);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.site-footer .ft-admin-link {
display: inline-flex; align-items: center; gap: 4px;
margin-left: 10px; padding: 3px 9px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
font-size: 11px; font-weight: 600;
color: rgba(255,255,255,.55);
vertical-align: middle;
transition: color .15s, border-color .15s, background .15s;
}
.site-footer .ft-admin-link:hover {
color: #fff;
border-color: rgba(255,255,255,.5);
background: rgba(255,255,255,.06);
}
.site-footer .ft-admin-link svg { display: block; }
@media (max-width: 992px) {
.site-footer .info { grid-template-columns: 1fr; gap: 36px; }
.site-footer .ft-logo { font-size: 22px; }
}
@media (max-width: 480px) {
.site-footer { padding-top: 40px; }
.site-footer .top { gap: 16px 24px; font-size: 13px; }
.site-footer .ft-logo { font-size: 19px; }
.site-footer .ft-line { font-size: 13px; }
.site-footer .ft-line strong { font-size: 12px; padding: 2px 8px; }
.site-footer .ft-hours { font-size: 12px; display: block; margin-left: 0; margin-top: 2px; }
.site-footer .ft-mini-link { margin-left: 0; padding: 0; border-left: 0; }
.site-footer .ft-blog { padding: 14px 16px; gap: 10px; }
.site-footer .ft-blog-text strong { font-size: 14px; }
.site-footer .ft-blog-text small { font-size: 10px; }
}
/* === 모바일 메뉴 오버레이 ====================================== */
.mobile-menu {
position: fixed; inset: 0; z-index: 200;
background: var(--c-white);
display: none;
flex-direction: column;
padding: 30px var(--side-pad);
overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu .close {
align-self: flex-end;
background: none; border: 0; padding: 12px;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.mobile-menu .m-grp {
border-bottom: 1px solid var(--c-line);
padding-bottom: 12px;
}
.mobile-menu .m-top {
display: block;
font-size: 24px; font-weight: 800;
padding: 14px 0;
color: var(--c-text);
min-height: 52px;
line-height: 1.5;
}
.mobile-menu .m-sub { padding-left: 14px; }
.mobile-menu .m-sub a {
display: block;
font-size: 17px; font-weight: 500;
color: var(--c-muted);
padding: 10px 0; /* 터치 타깃 확장 */
min-height: 44px;
line-height: 1.4;
}
.mobile-menu .m-login {
margin-top: 28px;
font-size: 19px; font-weight: 700;
color: var(--c-brand);
padding: 18px;
border: 2px solid var(--c-brand);
text-align: center; border-radius: 6px;
min-height: 56px;
}
/* === 팝업 호환 (popup/show.php 스타일과 충돌 방지) ============= */
.dboard-popup-overlay { z-index: 9998; }
.dboard-popup { z-index: 9999; }
/* ╔══════════════════════════════════════════════════════════════
║ 회원 로그인 (/member/login.php)
║ — /training/watch.php 와 동일한 SDF 스타일 (.te-* 재사용)
║ — 로그인 페이지 전용 추가 클래스 .ml-*
╚══════════════════════════════════════════════════════════════ */
.member-login {
padding: 60px 0 100px;
background: linear-gradient(180deg, #fafafa 0%, #fff 320px);
min-height: 70vh;
}
.ml-guide {
background: #fff;
border: 1px solid var(--c-line);
border-left: 6px solid #111;
padding: 28px 32px;
margin-bottom: 36px;
}
.ml-guide h2 {
font-size: 26px; font-weight: 800;
margin: 0 0 16px;
display: flex; align-items: center; gap: 12px;
color: #111; letter-spacing: -0.02em;
}
.ml-guide h2 .ico {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border-radius: 50%;
background: #111; color: #fff;
font-size: 18px; font-weight: 800;
}
.ml-guide ol {
margin: 0; padding: 0; list-style: none;
font-size: 18px; line-height: 1.8; color: #444;
}
.ml-guide ol li {
padding: 4px 0;
}
.ml-guide ol li b { color: #111; font-weight: 700; }
.ml-error {
background: #fee2e2;
color: #b91c1c;
border: 1px solid #fecaca;
border-radius: 6px;
padding: 14px 20px;
margin-bottom: 20px;
font-size: 16px;
font-weight: 600;
text-align: center;
}
.ml-misc {
margin-top: 32px;
text-align: center;
font-size: 14px;
color: #777;
line-height: 1.7;
}
.ml-misc a {
color: #1e3a8a;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(30,58,138,0.3);
text-underline-offset: 3px;
}
.ml-misc a:hover { text-decoration-color: #1e3a8a; }
@media (max-width: 768px) {
.member-login { padding: 24px 0 60px; }
.ml-guide { padding: 20px 18px; border-left-width: 5px; }
.ml-guide h2 { font-size: 22px; gap: 10px; margin-bottom: 14px; }
.ml-guide h2 .ico { width: 30px; height: 30px; font-size: 16px; }
.ml-guide ol { font-size: 16px; line-height: 1.7; }
.ml-error { font-size: 15px; padding: 12px 16px; }
.ml-misc { font-size: 13px; }
}
/* ╔══════════════════════════════════════════════════════════════
║ 이수증 (/training/cert.php)
║ — SDF 스타일 미니멀 + 인쇄/다운로드
╚══════════════════════════════════════════════════════════════ */
/* ── 미발급 안내 페이지 ──────────────────────────── */
.cert-empty {
padding: 60px 0 100px;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
min-height: 60vh;
}
.cert-empty-box {
max-width: 580px; margin: 0 auto;
text-align: center;
padding: 50px 40px;
background: #fff;
border: 1px solid var(--c-line);
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.cert-empty-icon {
font-size: 56px;
margin-bottom: 18px;
}
.cert-empty-title {
font-size: 24px; font-weight: 800;
margin: 0 0 14px;
color: #111;
letter-spacing: -0.02em;
}
.cert-empty-msg {
font-size: 16px; line-height: 1.7;
color: #555;
margin-bottom: 26px;
}
.cert-empty-progress {
background: #f8fafc;
padding: 18px 22px;
border-radius: 8px;
margin-bottom: 26px;
text-align: left;
}
.cert-empty-progress-label {
display: flex; justify-content: space-between; align-items: center;
font-size: 14px; color: #555;
margin-bottom: 10px;
}
.cert-empty-progress-label strong { color: #111; }
.cert-empty-pct {
font-size: 18px; font-weight: 800; color: #1e3a8a;
}
.cert-empty-bar {
height: 10px; background: #e5e7eb;
border-radius: 999px; overflow: hidden;
}
.cert-empty-bar > div {
height: 100%;
background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);
transition: width .3s;
}
.cert-empty-btn {
display: inline-block;
padding: 14px 32px;
background: #111; color: #fff;
border-radius: 999px;
font-size: 16px; font-weight: 700;
text-decoration: none;
transition: background .15s, transform .1s;
}
.cert-empty-btn:hover { background: #333; color: #fff; transform: translateY(-1px); }
/* ── 이수증 화면 보기 ───────────────────────────── */
.cert-view {
padding: 40px 0 80px;
background: #f8fafc;
min-height: 80vh;
}
/* === 축하 배너 (이수증 발급 직후 24시간 이내 표시) === */
.cv-celebrate {
display: flex; align-items: center; gap: 18px;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ef4444 100%);
color: #fff;
border-radius: 14px;
padding: 22px 26px;
margin-bottom: 28px;
box-shadow: 0 10px 32px rgba(245,158,11,0.35);
position: relative;
animation: cv-celebrate-in .5s ease;
}
@keyframes cv-celebrate-in {
from { opacity: 0; transform: translateY(-12px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cv-celebrate.is-closing {
animation: cv-celebrate-out .25s ease forwards;
}
@keyframes cv-celebrate-out {
to { opacity: 0; transform: translateY(-6px); }
}
.cv-celebrate-icon {
font-size: 48px;
flex-shrink: 0;
animation: cv-bounce 1.2s ease-in-out infinite alternate;
}
@keyframes cv-bounce {
from { transform: translateY(0) rotate(-5deg); }
to { transform: translateY(-6px) rotate(5deg); }
}
.cv-celebrate-body { flex: 1; }
.cv-celebrate-title {
font-size: 22px; font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.cv-celebrate-sub {
font-size: 15px; line-height: 1.6;
color: rgba(255,255,255,0.95);
}
.cv-celebrate-close {
background: rgba(255,255,255,0.2);
border: 0; color: #fff;
width: 36px; height: 36px;
border-radius: 50%;
font-size: 24px; line-height: 1;
cursor: pointer;
flex-shrink: 0;
transition: background .15s;
-webkit-tap-highlight-color: transparent;
}
.cv-celebrate-close:hover { background: rgba(255,255,255,0.35); }
/* Confetti 효과 (이수증 발급 직후 화면 위에서 떨어짐) */
.cv-confetti {
position: fixed;
top: -40px;
font-size: 32px;
pointer-events: none;
z-index: 9999;
animation: cv-confetti-fall linear forwards;
}
@keyframes cv-confetti-fall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@media (max-width: 768px) {
.cv-celebrate { padding: 18px 18px; gap: 14px; }
.cv-celebrate-icon { font-size: 36px; }
.cv-celebrate-title { font-size: 18px; }
.cv-celebrate-sub { font-size: 13px; }
.cv-celebrate-close { width: 32px; height: 32px; font-size: 20px; }
.cv-confetti { font-size: 26px; }
}
.cv-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 24px;
flex-wrap: wrap; gap: 12px;
}
.cv-back {
font-size: 15px; font-weight: 500;
color: #555; text-decoration: none;
padding: 8px 14px;
border-radius: 6px;
transition: background .15s;
}
.cv-back:hover { background: #f1f5f9; color: #111; }
.cv-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cv-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 24px;
border-radius: 8px;
font-size: 15px; font-weight: 700;
font-family: inherit;
text-decoration: none;
cursor: pointer;
border: 0;
transition: background .15s, transform .1s, box-shadow .15s;
min-height: 48px;
}
.cv-btn-primary {
background: #1e3a8a; color: #fff;
box-shadow: 0 4px 12px rgba(30,58,138,0.25);
}
.cv-btn-primary:hover { background: #1e40af; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30,58,138,0.35); }
.cv-btn-light {
background: #fff; color: #1e3a8a;
border: 2px solid #1e3a8a;
}
.cv-btn-light:hover { background: #1e3a8a; color: #fff; }
.cv-title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 900;
letter-spacing: -0.03em;
margin: 0 0 8px;
color: #0f172a;
}
.cv-title-en {
display: block;
font-size: 13px; font-weight: 600;
color: #94a3b8;
letter-spacing: 0.3em;
margin-bottom: 6px;
}
.cv-meta {
display: flex; gap: 18px; flex-wrap: wrap;
margin-bottom: 28px;
font-size: 15px;
}
.cv-meta-no {
font-weight: 700;
color: #1e3a8a;
background: #dbeafe;
padding: 6px 14px;
border-radius: 999px;
letter-spacing: -0.01em;
}
.cv-meta-date {
color: #64748b;
padding: 6px 0;
}
/* ── 미리보기 (iframe 으로 인쇄와 동일한 디자인 표시) ─── */
.cv-preview-wrap {
background: #fff;
border: 1px solid var(--c-line);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
margin-bottom: 28px;
/* 종횡비 297:210 = A4 가로 */
aspect-ratio: 297 / 210;
position: relative;
}
.cv-preview {
width: 100%; height: 100%;
border: 0;
display: block;
}
/* ── 정보 카드 ─────────────────────────────────── */
.cv-info {
background: #fff;
border: 1px solid var(--c-line);
border-radius: 12px;
overflow: hidden;
margin-bottom: 24px;
}
.cv-info-row {
display: grid;
grid-template-columns: 180px 1fr;
border-bottom: 1px solid #f1f5f9;
}
.cv-info-row:last-child { border-bottom: 0; }
.cv-info-label {
background: #f8fafc;
padding: 16px 22px;
font-size: 14px; font-weight: 700;
color: #475569;
letter-spacing: -0.01em;
}
.cv-info-value {
padding: 16px 22px;
font-size: 16px; font-weight: 600;
color: #0f172a;
}
.cv-info-emph {
color: #1e3a8a; font-weight: 800;
}
/* ── 안내 박스 ─────────────────────────────────── */
.cv-help {
background: #f1f5f9;
border-left: 4px solid #1e3a8a;
padding: 18px 22px;
border-radius: 6px;
font-size: 15px; line-height: 1.6;
color: #334155;
}
.cv-help strong {
display: block;
font-size: 16px; font-weight: 800;
color: #1e3a8a;
margin-bottom: 10px;
}
.cv-help ul {
margin: 0; padding: 0 0 0 18px;
list-style: none;
}
.cv-help li {
position: relative;
padding: 4px 0 4px 18px;
}
.cv-help li::before {
content: "·";
position: absolute; left: 0; top: 4px;
color: #1e3a8a; font-weight: 800; font-size: 18px;
}
.cv-help b { color: #0f172a; font-weight: 700; }
/* ── 모바일 ────────────────────────────────────── */
@media (max-width: 768px) {
.cert-view { padding: 24px 0 60px; }
.cv-head { flex-direction: column; align-items: stretch; }
.cv-back { text-align: left; }
.cv-actions { width: 100%; }
.cv-btn { flex: 1; justify-content: center; padding: 14px; font-size: 15px; }
.cv-title { font-size: 24px; }
.cv-info-row {
grid-template-columns: 1fr;
}
.cv-info-label {
padding: 10px 16px;
font-size: 12px;
border-bottom: 1px solid #f1f5f9;
}
.cv-info-value {
padding: 12px 16px 14px;
font-size: 16px;
}
.cv-help { font-size: 14px; padding: 16px 18px; }
.cv-help li { padding-left: 16px; }
.cert-empty-box { padding: 36px 22px; }
.cert-empty-title { font-size: 20px; }
.cert-empty-icon { font-size: 44px; }
.cert-empty-msg { font-size: 15px; }
}
/* ╔══════════════════════════════════════════════════════════════
║ 법정연수 진입 페이지 (/training/watch.php)
║ — 레거시 online_00.php 의 ① 이름 입력 → ② 교습소 선택 흐름
╚══════════════════════════════════════════════════════════════ */
.training-entry {
padding: 60px 0 100px;
background: linear-gradient(180deg, #fafafa 0%, #fff 320px);
}
/* training-entry 는 메인 .container (좌우 15%) 를 그대로 따른다 */
/* ── 안내 박스 ─────────────────────────────────────── */
.te-guide {
background: #fff;
border: 1px solid var(--c-line);
border-left: 6px solid #111;
padding: 28px 32px;
margin-bottom: 48px;
}
.te-guide h2 {
font-size: 26px; font-weight: 800;
margin: 0 0 16px;
display: flex; align-items: center; gap: 12px;
color: #111; letter-spacing: -0.02em;
}
.te-guide h2 .ico {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
border-radius: 50%;
background: #111; color: #fff;
font-size: 18px; font-weight: 800;
}
.te-guide ol {
margin: 0; padding: 0; list-style: none;
font-size: 18px; line-height: 1.8; color: #444;
}
.te-guide ol li {
padding: 4px 0;
}
.te-guide ol li b { color: #111; font-weight: 700; }
.te-guide ol li b.emph { color: #d35400; }
/* ── 단계 박스 ─────────────────────────────────────── */
.te-form { margin: 0 0 60px; }
.te-step {
background: #fff;
border: 1px solid var(--c-line);
border-radius: 6px;
padding: 36px 36px 28px;
margin-bottom: 24px;
position: relative;
}
.te-step-num {
position: absolute; top: -22px; left: 30px;
width: 44px; height: 44px;
background: #111; color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 800;
}
.te-step-title {
font-size: 22px; font-weight: 700;
margin: 0 0 22px;
color: #111; letter-spacing: -0.01em;
text-align: center;
}
/* ── 입력 필드 ─────────────────────────────────────── */
.te-input,
.te-select {
width: 100%;
padding: 18px 22px; /* 더 넓은 터치 영역 */
font-size: 20px; /* 18px 본문 대비 약간 더 크게 */
font-family: inherit;
font-weight: 600;
border: 2px solid #e0e0e0;
border-radius: 6px;
background: #fff;
color: #111;
transition: border-color .15s, box-shadow .15s;
appearance: none;
-webkit-appearance: none;
}
.te-input:focus,
.te-select:focus {
outline: none;
border-color: #111;
box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.te-input::placeholder { color: #aaa; font-weight: 400; }
.te-help {
margin: 14px 0 0;
text-align: center;
font-size: 15px; line-height: 1.6;
color: #777;
}
.te-help b { color: #d35400; font-weight: 700; }
/* ── 입력 + 스피너 ─────────────────────────────────── */
.te-input-wrap {
position: relative;
}
.te-spin {
position: absolute;
right: 18px; top: 50%;
transform: translateY(-50%);
width: 18px; height: 18px;
border: 2px solid #e5e5e5; border-top-color: #111;
border-radius: 50%;
animation: te-spin 0.7s linear infinite;
pointer-events: none;
}
@keyframes te-spin { to { transform: translateY(-50%) rotate(360deg); } }
/* ── 결과 리스트 (자동완성, 항상 보임) ───────────────── */
.te-result-head {
font-size: 16px; font-weight: 600;
color: #555;
padding: 14px 18px;
background: #f8f8f8;
border: 1px solid var(--c-line);
border-bottom: 0;
border-radius: 6px 6px 0 0;
letter-spacing: -0.01em;
}
.te-result-head.count { color: #1e3a8a; background: #eef2ff; border-color: #c7d2fe; }
.te-result-head.empty { color: #b54708; background: #fff7e6; border-color: #fde2b8; }
.te-result-head.err { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.te-result-list {
border: 1px solid var(--c-line);
border-radius: 0 0 6px 6px;
background: #fff;
max-height: 460px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 80px;
scroll-behavior: smooth;
/* 모바일에서 손가락으로 스크롤 부드럽게 */
overscroll-behavior: contain;
}
.te-result-list:empty::before {
content: "후보가 여기에 표시됩니다";
display: block;
padding: 30px;
text-align: center;
color: #aaa;
font-size: 16px;
}
.te-result-item {
display: grid;
grid-template-columns: 200px 1fr auto;
gap: 18px;
align-items: center;
padding: 18px 22px; /* 터치 타깃 확보 — 최소 56px 높이 */
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background .12s;
font-size: 18px; /* 본문 18px 기준 */
outline: none;
min-height: 56px;
}
.te-result-item:last-child { border-bottom: 0; }
.te-result-item:hover {
background: #f6f6f6;
}
.te-result-item:focus {
background: #eef2ff;
outline: 2px solid #1e3a8a;
outline-offset: -2px;
}
.te-result-item:active {
background: #e5e7eb;
}
.te-result-item.is-selected {
background: #111 !important;
color: #fff !important;
}
.te-result-item.is-selected .te-result-office,
.te-result-item.is-selected .te-result-inst,
.te-result-item.is-selected .te-result-name { color: #fff; }
.te-result-item.is-selected::after {
content: "✓";
color: #ffcc00; font-weight: 800; margin-left: 8px; font-size: 22px;
}
.te-result-office {
font-size: 18px; /* ← 사용자 요청: 교육청 명 18px */
font-weight: 700;
color: #1e3a8a;
background: #eef2ff;
padding: 8px 14px;
border-radius: 999px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
}
.te-result-item.is-selected .te-result-office {
background: rgba(255,204,0,0.2);
color: #ffcc00;
}
.te-result-inst {
font-size: 18px; /* ← 사용자 요청: 교습소 이름 18px */
font-weight: 600;
color: #111;
letter-spacing: -0.01em;
word-break: keep-all;
}
.te-result-name {
font-size: 16px; /* 보조 정보 — 살짝 작게 */
color: #888;
white-space: nowrap;
font-weight: 500;
}
/* ── 선택됨 표시 ─────────────────────────────────── */
.te-selected {
margin-top: 18px;
padding: 16px 20px;
background: #111; color: #fff;
border-radius: 6px;
font-size: 18px;
display: flex; align-items: center; gap: 12px;
animation: te-pop .25s ease;
flex-wrap: wrap;
}
@keyframes te-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.te-selected-label {
font-size: 13px; font-weight: 700;
color: #ffcc00;
letter-spacing: 0.1em;
background: rgba(255,204,0,0.15);
padding: 5px 10px; border-radius: 4px;
}
.te-selected-text { font-weight: 600; font-size: 18px; }
/* ── 확인 버튼 disabled 상태 ───────────────────── */
.te-btn-primary:disabled {
background: #ccc; border-color: #ccc;
color: #fff;
cursor: not-allowed;
}
.te-btn-primary:disabled:hover {
background: #ccc;
}
/* ╔══════════════════════════════════════════════════════════════
║ 모바일 최적화 (iPhone, Galaxy)
║ — 터치 타깃 44px+, 폰트 17-18px, 안전한 padding
╚══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* 본문 — iOS Safari 줌 방지를 위해 input 16px 이상 보장 */
body { font-size: 17px; }
.training-entry { padding: 24px 0 60px; }
/* 안내 박스 */
.te-guide { padding: 20px 18px; border-left-width: 5px; }
.te-guide h2 { font-size: 22px; gap: 10px; margin-bottom: 14px; }
.te-guide h2 .ico { width: 30px; height: 30px; font-size: 16px; }
.te-guide ol { font-size: 16px; line-height: 1.7; }
/* 단계 박스 */
.te-step {
padding: 32px 18px 22px;
border-radius: 8px;
}
.te-step-num {
width: 40px; height: 40px;
font-size: 18px;
top: -20px; left: 18px;
}
.te-step-title {
font-size: 19px;
margin-bottom: 18px;
text-align: left;
}
/* 입력 필드 */
.te-input {
padding: 16px 18px;
font-size: 18px; /* iOS 16px 미만이면 자동 zoom — 18px 유지 */
border-width: 2px;
}
.te-help { font-size: 14px; text-align: left; }
/* 결과 리스트 — 모바일에서 1-column 카드 형태 */
.te-result-head {
font-size: 15px;
padding: 12px 16px;
}
.te-result-list {
max-height: 60vh; /* 화면의 60%까지 차지 */
border-radius: 0 0 8px 8px;
}
.te-result-list:empty::before {
padding: 24px; font-size: 15px;
}
.te-result-item {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 6px;
padding: 16px 18px;
min-height: 64px; /* 터치 타깃 충분 */
font-size: 17px;
}
.te-result-office {
width: max-content;
font-size: 14px;
padding: 4px 12px;
grid-row: 1;
}
.te-result-inst {
font-size: 18px; /* 모바일에서도 18px 유지 (사용자 요청) */
grid-row: 2;
}
.te-result-name {
font-size: 14px;
grid-row: 1;
justify-self: end;
align-self: center;
}
.te-result-item.is-selected::after {
position: absolute;
right: 18px; bottom: 16px;
font-size: 24px;
}
.te-result-item { position: relative; }
/* 선택됨 박스 */
.te-selected {
font-size: 16px;
padding: 14px 16px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.te-selected-text { font-size: 17px; }
/* 확인 버튼 — 모바일에서 풀 너비, 더 큰 터치 영역 */
.te-btn-primary {
width: 100%;
padding: 18px 32px;
font-size: 18px;
border-radius: 8px;
}
/* 브라우저 안내 + 문의 */
.te-browser { padding: 24px 18px; }
.te-browser-head { font-size: 15px; }
.te-browser-btns { flex-direction: column; gap: 10px; }
.te-browser-btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 15px; }
.te-contact { font-size: 15px; padding: 18px 16px; }
.te-contact-note { font-size: 13px; }
/* 입력박스에서 iOS 자동 줌 완전 차단 */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select {
font-size: 16px !important; /* 최소 16px - 일반 입력은 16px (input) */
}
/* 단, 강조 필드(.te-input)는 18px 명시적 보장 */
.te-input { font-size: 18px !important; }
}
/* ── 작은 모바일 (iPhone SE 등) ─────────────────── */
@media (max-width: 380px) {
.te-step { padding: 28px 14px 18px; }
.te-step-num { left: 14px; }
.te-input { padding: 14px 14px; font-size: 17px !important; }
.te-result-item { padding: 14px 14px; }
.te-result-inst { font-size: 17px; }
.te-btn-primary { font-size: 17px; padding: 16px 24px; }
}
/* ── 확인 버튼 ─────────────────────────────────────── */
.te-actions {
text-align: center;
margin: 32px 0 0;
}
.te-btn-primary {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 60px;
font-size: 16px; font-weight: 700;
font-family: inherit;
background: #111; color: #fff;
border: 2px solid #111; border-radius: 999px;
cursor: pointer;
letter-spacing: 0.02em;
transition: background .15s, transform .1s;
}
.te-btn-primary:hover { background: #333; }
.te-btn-primary:active { transform: scale(0.98); }
/* ── 브라우저 안내 ─────────────────────────────────── */
.te-browser {
background: #1a1a1a; color: #fff;
border-radius: 6px;
padding: 36px 32px;
text-align: center;
margin-bottom: 32px;
}
.te-browser-head {
font-size: 15px; line-height: 1.7;
margin-bottom: 24px;
}
.te-browser-head strong { color: #ffcc00; font-weight: 700; }
.te-browser-btns {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.te-browser-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 28px;
font-size: 14px; font-weight: 600;
border-radius: 999px;
text-decoration: none;
transition: transform .1s, box-shadow .15s;
}
.te-browser-btn.chrome { background: #fbbc04; color: #111; }
.te-browser-btn.edge { background: #0078d4; color: #fff; }
.te-browser-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.te-browser-icon {
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
}
/* ── 문의 박스 ─────────────────────────────────────── */
.te-contact {
border: 1px dashed var(--c-line);
padding: 22px 28px;
text-align: center;
font-size: 14px; line-height: 1.7;
color: #444;
border-radius: 6px;
}
.te-contact a { color: #111; font-weight: 700; text-decoration: none; }
.te-contact a:hover { text-decoration: underline; }
.te-contact-note {
margin: 8px 0 0;
font-size: 12px; color: #888;
}
/* ╔══════════════════════════════════════════════════════════════
║ 법정연수 영상 목록 (/training/index.php)
╚══════════════════════════════════════════════════════════════ */
.training-list {
padding: 50px 0 100px;
background: #fafafa;
min-height: 70vh;
}
/* training-list 는 메인 .container (좌우 15%) 를 그대로 따른다 */
.tl-head {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
padding-bottom: 16px;
border-bottom: 1px solid var(--c-line);
margin-bottom: 24px;
}
.tl-who { font-size: 17px; color: #444; }
.tl-region { color: #666; margin-right: 6px; }
.tl-inst { color: #666; }
.tl-actions a { font-size: 15px; color: #666; text-decoration: none; }
.tl-actions a:hover { color: #111; text-decoration: underline; }
.tl-title {
font-size: clamp(26px, 4vw, 34px);
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 32px;
color: #111;
}
.tl-banner {
padding: 22px 28px;
border-radius: 6px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 14px;
margin-bottom: 32px;
font-size: 18px;
}
.tl-banner-success {
background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
}
.tl-banner-info {
background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3;
}
.tl-banner-btn {
background: #fff; border: 1px solid currentColor;
padding: 8px 18px;
border-radius: 4px;
font-size: 14px; font-weight: 600;
text-decoration: none; color: inherit;
}
.tl-progress {
background: #fff;
border: 1px solid var(--c-line);
border-radius: 6px;
padding: 22px 28px;
margin-bottom: 32px;
}
.tl-progress-label {
font-size: 16px; color: #555;
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
}
.tl-progress-label strong { color: #111; font-weight: 700; }
.tl-progress-pct {
font-size: 20px; font-weight: 800; color: #111;
}
.tl-progress-bar {
height: 10px; background: #f0f0f0;
border-radius: 999px; overflow: hidden;
}
.tl-progress-bar > div {
height: 100%;
background: linear-gradient(90deg, #111 0%, #444 100%);
transition: width .3s;
}
.tl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.tl-card {
background: #fff;
border: 1px solid var(--c-line);
border-radius: 8px;
padding: 28px;
display: flex; flex-direction: column;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tl-card:hover {
border-color: #111;
box-shadow: 0 4px 16px rgba(0,0,0,.06);
transform: translateY(-2px);
}
.tl-card.is-done {
background: #f0fdf4;
border-color: #86efac;
}
.tl-card-num {
font-size: 14px; font-weight: 700;
color: #777; letter-spacing: 0.1em;
margin-bottom: 8px;
}
.tl-card-title {
font-size: 22px; font-weight: 700;
margin: 0 0 10px;
color: #111; letter-spacing: -0.01em;
line-height: 1.4;
}
.tl-card-lecturer {
font-size: 14px; font-weight: 600;
color: #1e3a8a;
background: #eef2ff;
padding: 6px 12px;
border-radius: 4px;
margin-bottom: 12px;
display: inline-block;
letter-spacing: -0.01em;
}
.tl-card-meta {
font-size: 15px; color: #777;
margin-bottom: 16px;
}
.tl-card-bar {
height: 8px; background: #eee;
border-radius: 999px; overflow: hidden;
margin-bottom: 10px;
}
.tl-card-bar > div {
height: 100%; background: #111;
}
.tl-card.is-done .tl-card-bar > div { background: #16a34a; }
.tl-card-stat {
display: flex; justify-content: space-between;
font-size: 15px; color: #555;
margin-bottom: 18px;
}
.tl-done { color: #16a34a; font-weight: 700; }
.tl-card-btn {
display: block; text-align: center;
padding: 16px;
background: #111; color: #fff;
border-radius: 6px;
font-size: 17px; font-weight: 700;
text-decoration: none;
margin-top: auto;
transition: background .15s;
min-height: 48px; /* 터치 타깃 */
}
.tl-card-btn:hover { background: #333; color: #fff; }
.tl-card.is-done .tl-card-btn { background: #16a34a; }
.tl-card.is-done .tl-card-btn:hover { background: #15803d; }
.tl-empty {
grid-column: 1 / -1;
text-align: center;
padding: 80px 20px;
color: #888;
font-size: 17px;
background: #fff;
border: 1px dashed var(--c-line);
border-radius: 6px;
}
/* ╔══════════════════════════════════════════════════════════════
║ 이수증 발급 CTA (영상 목록 하단)
║ — 모든 차시 이수 시 자동 활성화
╚══════════════════════════════════════════════════════════════ */
.tl-cert-cta-wrap {
margin-top: 60px;
padding: 40px 20px;
text-align: center;
border-top: 1px dashed var(--c-line);
}
.tl-cert-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 22px 56px;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
border-radius: 16px;
text-decoration: none;
border: 0;
cursor: pointer;
font-family: inherit;
transition: transform .15s, box-shadow .2s, background .2s;
min-height: 80px;
min-width: 360px;
position: relative;
overflow: hidden;
}
/* 활성: 발급 가능 (시청 완료 + 미발급) — 강한 강조 (그라디언트 + glow) */
.tl-cert-cta.is-ready {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%);
color: #fff;
box-shadow:
0 12px 32px rgba(245,158,11,0.4),
0 4px 12px rgba(239,68,68,0.25);
animation: tl-cta-pulse 2s ease-in-out infinite;
}
.tl-cert-cta.is-ready:hover {
transform: translateY(-3px) scale(1.02);
color: #fff;
box-shadow:
0 20px 48px rgba(245,158,11,0.5),
0 8px 20px rgba(239,68,68,0.35);
}
.tl-cert-cta.is-ready::before {
/* 빛나는 배경 — 좌→우로 흐름 */
content: "";
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
animation: tl-cta-shine 2.5s ease-in-out infinite;
}
@keyframes tl-cta-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.015); }
}
@keyframes tl-cta-shine {
0% { left: -100%; }
100% { left: 200%; }
}
/* 활성: 이미 발급됨 — 차분한 녹색 */
.tl-cert-cta.is-issued {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
box-shadow: 0 8px 24px rgba(16,185,129,0.3);
}
.tl-cert-cta.is-issued:hover {
transform: translateY(-2px);
color: #fff;
box-shadow: 0 12px 32px rgba(16,185,129,0.45);
}
/* 비활성: 시청 미완료 — 회색 (눌러도 반응 없음) */
.tl-cert-cta.is-disabled {
background: #e5e7eb;
color: #9ca3af;
cursor: not-allowed;
box-shadow: none;
border: 2px dashed #cbd5e1;
}
/* 진행률 (비활성 상태에서만 표시) */
.tl-cert-cta-progress {
max-width: 540px;
margin: 24px auto 0;
padding: 18px 24px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid var(--c-line);
}
.tl-cert-cta-progress-label {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 8px;
font-size: 14px; color: #555;
margin-bottom: 12px;
}
.tl-cert-cta-progress-label strong { color: #111; font-weight: 700; }
.tl-cert-cta-progress-label .tl-remain { color: #f59e0b; }
.tl-cert-cta-pct {
font-size: 18px; font-weight: 800; color: #1e3a8a;
}
.tl-cert-cta-bar {
height: 12px;
background: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
.tl-cert-cta-bar > div {
height: 100%;
background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
transition: width .5s;
border-radius: 999px;
}
@media (max-width: 768px) {
.tl-cert-cta-wrap { margin-top: 40px; padding: 30px 16px; }
.tl-cert-cta {
width: 100%;
min-width: 0;
min-height: 72px;
padding: 18px 24px;
font-size: 18px;
gap: 12px;
border-radius: 12px;
}
.tl-cert-cta svg { flex-shrink: 0; }
.tl-cert-cta.is-ready svg:first-child { width: 26px; height: 26px; }
.tl-cert-cta-progress { padding: 14px 16px; }
.tl-cert-cta-progress-label { font-size: 13px; }
.tl-cert-cta-pct { font-size: 16px; }
}
@media (max-width: 380px) {
.tl-cert-cta { font-size: 16px; padding: 16px 18px; }
}
/* ── 영상시청 페이지 (다크 테마) 하단 CTA — 색상 보정 ── */
.tp-cert-cta-wrap {
margin-top: 32px;
padding: 28px 0 12px;
border-top: 1px dashed #2a2a2a;
text-align: center;
}
.tp-cert-cta-wrap .tl-cert-cta-progress {
background: #141414;
border-color: #2a2a2a;
}
.tp-cert-cta-wrap .tl-cert-cta-progress-label {
color: #aaa;
}
.tp-cert-cta-wrap .tl-cert-cta-progress-label strong { color: #fff; }
.tp-cert-cta-wrap .tl-cert-cta-progress-label .tl-remain { color: #fbbf24; }
.tp-cert-cta-wrap .tl-cert-cta-pct { color: #60a5fa; }
.tp-cert-cta-wrap .tl-cert-cta-bar {
background: #2a2a2a;
}
.tp-cert-cta-wrap .tl-cert-cta.is-disabled {
background: #2a2a2a;
color: #666;
border-color: #3a3a3a;
}
@media (max-width: 768px) {
.tp-cert-cta-wrap { margin-top: 22px; padding: 20px 0 8px; }
}
/* ── 순차 시청 안내 박스 ─────────────────────────────── */
.tl-rule {
background: #fff7e6;
border: 1px solid #fde2b8;
border-left: 4px solid #f59e0b;
padding: 16px 22px;
border-radius: 6px;
margin-bottom: 24px;
font-size: 16px; line-height: 1.6;
color: #92400e;
}
.tl-rule strong {
display: inline-block;
background: #f59e0b;
color: #fff;
font-size: 13px; font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
margin-right: 10px;
vertical-align: middle;
}
.tl-rule.tl-rule-info {
background: #ecfdf5;
border-color: #a7f3d0;
border-left-color: #10b981;
color: #065f46;
}
.tl-rule.tl-rule-info strong { background: #10b981; }
/* ── 카드 상태 ─────────────────────────────────────── */
.tl-card { position: relative; }
/* 현재 시청해야 할 차시 — 강조 (검은 테두리 + 살짝 떠있는 그림자) */
.tl-card.is-current {
border-color: #111;
border-width: 2px;
box-shadow: 0 8px 24px rgba(17, 17, 17, 0.10);
transform: translateY(-2px);
}
.tl-card.is-current::before {
content: "";
position: absolute;
top: -2px; left: -2px; right: -2px;
height: 4px;
background: linear-gradient(90deg, #111 0%, #333 100%);
border-radius: 8px 8px 0 0;
}
/* 잠금 차시 — 회색조 + 비활성 */
.tl-card.is-locked {
filter: grayscale(0.6);
opacity: 0.55;
cursor: not-allowed;
background: #f5f5f5;
}
.tl-card.is-locked:hover {
border-color: var(--c-line);
transform: none;
box-shadow: none;
}
/* 잠금 오버레이 */
.tl-card-lock-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: rgba(255,255,255,0.5);
z-index: 2;
pointer-events: none;
border-radius: 8px;
}
.tl-card-lock-icon {
width: 56px; height: 56px;
background: #555;
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.tl-card-lock-text {
background: #1a1a1a;
color: #fff;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px; font-weight: 600;
letter-spacing: -0.01em;
}
/* 다시보기 모드 — 부드러운 청록 보더 */
.tl-card.is-replay {
border-color: #a7f3d0;
background: #f0fdf4;
}
.tl-card.is-replay:hover {
border-color: #10b981;
}
/* 카드 내부 뱃지 (현재/완료/다시보기) */
.tl-card-num {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
font-size: 14px;
}
.tl-card-badge {
font-size: 11px; font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.tl-card-badge-current { background: #111; color: #fff; }
.tl-card-badge-done { background: #d1fae5; color: #065f46; }
.tl-card-badge-replay { background: #dbeafe; color: #1e40af; }
/* 잠긴 카드 버튼 */
.tl-card-btn-disabled {
display: flex; align-items: center; justify-content: center;
padding: 16px;
background: #d4d4d4; color: #666;
border-radius: 6px;
font-size: 17px; font-weight: 700;
text-decoration: none;
margin-top: auto;
min-height: 48px;
cursor: not-allowed;
}
/* 다시보기 모드 카드의 버튼 */
.tl-card.is-replay .tl-card-btn {
background: #1e40af;
}
.tl-card.is-replay .tl-card-btn:hover { background: #1e3a8a; }
/* ── 영상목록 모바일 ───────────────────────────────── */
@media (max-width: 768px) {
.training-list { padding: 24px 0 60px; }
.tl-head { padding-bottom: 12px; margin-bottom: 18px; }
.tl-who { font-size: 16px; }
.tl-banner {
padding: 18px 20px;
flex-direction: column;
align-items: flex-start;
font-size: 16px;
}
.tl-banner-btn { width: 100%; text-align: center; padding: 12px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.tl-progress { padding: 18px 20px; }
.tl-progress-label { font-size: 15px; flex-wrap: wrap; }
.tl-progress-pct { font-size: 18px; }
.tl-progress-bar { height: 12px; } /* 모바일에서 더 두껍게 */
.tl-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.tl-card { padding: 20px 18px; }
.tl-card-title { font-size: 19px; line-height: 1.35; }
.tl-card-meta { font-size: 14px; }
.tl-card-stat { font-size: 14px; }
.tl-card-bar { height: 10px; } /* 모바일 바 두껍게 */
.tl-card-btn,
.tl-card-btn-disabled {
font-size: 17px;
padding: 16px;
min-height: 52px; /* 큰 터치 타깃 */
border-radius: 8px;
font-weight: 700;
}
/* 잠금 카드 — 모바일에서 더 또렷이 */
.tl-card.is-locked { padding: 16px 18px; min-height: 200px; }
.tl-card-lock-icon { width: 64px; height: 64px; }
.tl-card-lock-icon svg { width: 36px; height: 36px; }
.tl-card-lock-text { font-size: 14px; padding: 7px 16px; }
/* 현재 시청 카드 강조 — 살짝 위로 */
.tl-card.is-current { transform: translateY(-1px); }
/* 뱃지 사이즈 */
.tl-card-num { font-size: 13px; }
.tl-card-badge { font-size: 11px; padding: 3px 8px; }
/* 순차 안내 박스 모바일 */
.tl-rule {
padding: 14px 16px;
font-size: 14px;
line-height: 1.55;
}
.tl-rule strong {
display: inline;
font-size: 12px;
padding: 3px 8px;
margin-right: 6px;
}
}
/* ╔══════════════════════════════════════════════════════════════
║ 법정연수 시청 페이지 (/training/play.php)
║ — YouTube IFrame Player API 기반
╚══════════════════════════════════════════════════════════════ */
.training-play {
padding: 40px 0 80px;
background: #0a0a0a;
color: #fff;
min-height: 80vh;
/* iPhone 노치 영역까지 검은 배경 확장 (visual continuity) */
margin-left: calc(-1 * env(safe-area-inset-left));
margin-right: calc(-1 * env(safe-area-inset-right));
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* training-play 는 메인 .container (좌우 15%) 를 그대로 따른다 */
.tp-head {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #2a2a2a;
}
.tp-back {
color: #aaa; text-decoration: none;
font-size: 16px; font-weight: 500;
padding: 6px 0;
min-height: 32px; display: inline-flex; align-items: center;
}
.tp-back:hover { color: #fff; }
.tp-who { font-size: 15px; color: #888; }
.tp-who strong { color: #fff; font-weight: 600; }
.tp-title {
font-size: clamp(24px, 4vw, 30px);
font-weight: 800;
margin: 0 0 8px;
letter-spacing: -0.02em;
line-height: 1.3;
}
.tp-num {
display: inline-block;
font-size: 14px; font-weight: 700;
color: #ff9500;
letter-spacing: 0.1em;
margin-right: 12px;
padding: 5px 12px;
border: 1px solid #ff9500;
border-radius: 4px;
vertical-align: middle;
}
.tp-meta {
font-size: 16px; color: #888;
margin-bottom: 24px;
}
.tp-meta strong { color: #ffcc00; }
/* ── 강한 고지 (시청 시간 산정 안내) — collapsible ───── */
.tp-warn-collapsible {
background: rgba(255,149,0,0.06);
border: 2px solid #ff9500;
border-radius: 8px;
margin-bottom: 22px;
overflow: hidden;
}
.tp-warn-summary {
display: flex; align-items: center; gap: 10px;
padding: 18px 22px;
font-size: 17px; color: #ffcc00;
cursor: pointer;
user-select: none;
list-style: none; /* 기본 화살표 제거 */
letter-spacing: -0.01em;
-webkit-tap-highlight-color: rgba(255,149,0,0.2);
min-height: 56px; /* 터치 타깃 */
}
.tp-warn-summary::-webkit-details-marker { display: none; }
.tp-warn-summary svg { flex-shrink: 0; color: #ff9500; }
.tp-warn-summary strong { font-weight: 800; }
.tp-warn-hint {
margin-left: auto;
font-size: 13px; color: #aaa;
font-weight: 500;
}
.tp-warn-summary::after {
content: "▼";
font-size: 12px;
color: #ff9500;
margin-left: 8px;
transition: transform .2s;
}
.tp-warn-collapsible[open] .tp-warn-summary::after {
transform: rotate(180deg);
}
.tp-warn-collapsible[open] .tp-warn-summary {
border-bottom: 1px solid rgba(255,149,0,0.25);
}
.tp-warn {
padding: 16px 22px 20px;
color: #fff;
}
.tp-warn-list {
margin: 0; padding: 0 0 0 4px;
list-style: none;
font-size: 16px; line-height: 1.8;
color: #d8d8d8;
}
.tp-warn-list li {
position: relative;
padding-left: 22px;
padding-top: 2px; padding-bottom: 2px;
}
.tp-warn-list li::before {
content: "▸";
position: absolute; left: 0;
color: #ff9500;
font-weight: 800;
}
.tp-warn-list li b { color: #fff; font-weight: 700; }
/* ── 이수 완료 정적 배너 (페이지 진입 시 이미 완료) ─── */
.tp-completed-banner {
background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(5,150,105,0.10) 100%);
border: 2px solid #10b981;
border-radius: 8px;
padding: 18px 22px;
margin-bottom: 22px;
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.tp-completed-info { display: flex; align-items: center; gap: 14px; }
.tp-completed-icon {
width: 48px; height: 48px;
background: #10b981;
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 26px; font-weight: 800;
}
.tp-completed-label {
font-size: 18px; font-weight: 700; color: #34d399;
margin-bottom: 4px;
}
.tp-completed-sub {
font-size: 14px; color: #aaa;
}
.tp-completed-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tp-next-btn {
display: inline-flex; align-items: center;
padding: 12px 22px;
background: #10b981; color: #fff;
border-radius: 999px;
text-decoration: none;
font-weight: 700; font-size: 15px;
transition: background .15s, transform .1s;
min-height: 44px;
}
.tp-next-btn:hover { background: #059669; color: #fff; transform: translateY(-1px); }
/* ── 다음 차시 자동 이동 모달 (시청 도중 도달 시) ─── */
.tp-auto-next-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.85);
z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: tp-fade-in .25s ease;
}
@keyframes tp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.tp-auto-next-modal {
background: linear-gradient(180deg, #111 0%, #1a1a1a 100%);
border: 2px solid #10b981;
border-radius: 16px;
padding: 40px 36px;
max-width: 520px; width: 100%;
text-align: center;
color: #fff;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
animation: tp-modal-pop .3s ease;
}
@keyframes tp-modal-pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tp-auto-next-icon {
width: 80px; height: 80px;
background: #10b981;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 44px; font-weight: 800;
margin: 0 auto 20px;
box-shadow: 0 8px 24px rgba(16,185,129,0.5);
}
.tp-auto-next-title {
font-size: 24px; font-weight: 800;
margin-bottom: 12px;
letter-spacing: -0.02em;
color: #34d399;
}
.tp-auto-next-sub {
font-size: 16px; line-height: 1.6;
color: #ccc;
margin-bottom: 24px;
}
.tp-auto-next-sub b { color: #ffcc00; font-weight: 800; }
.tp-auto-next-countdown {
font-size: 56px; font-weight: 900;
color: #fbbf24;
margin: 16px 0 24px;
font-variant-numeric: tabular-nums;
text-shadow: 0 4px 12px rgba(251,191,36,0.4);
animation: tp-pulse 1s infinite;
}
@keyframes tp-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.tp-auto-next-actions {
display: flex; flex-direction: column; gap: 10px;
}
.tp-auto-next-go,
.tp-auto-next-cancel {
display: block;
padding: 16px 28px;
border-radius: 8px;
font-size: 16px; font-weight: 700;
font-family: inherit;
cursor: pointer;
text-decoration: none;
transition: background .15s, transform .1s;
border: 0;
min-height: 52px;
}
.tp-auto-next-go {
background: #10b981; color: #fff;
}
.tp-auto-next-go:hover { background: #059669; color: #fff; transform: translateY(-1px); }
.tp-auto-next-cancel {
background: transparent;
color: #9ca3af;
border: 1px solid #2a2a2a;
}
.tp-auto-next-cancel:hover { background: rgba(255,255,255,0.05); color: #fff; }
@media (max-width: 600px) {
.tp-auto-next-modal { padding: 30px 22px; }
.tp-auto-next-icon { width: 64px; height: 64px; font-size: 36px; }
.tp-auto-next-title { font-size: 20px; }
.tp-auto-next-sub { font-size: 14px; }
.tp-auto-next-countdown { font-size: 48px; }
.tp-auto-next-go, .tp-auto-next-cancel { font-size: 15px; padding: 14px 20px; }
.tp-completed-banner { padding: 14px 16px; flex-direction: column; align-items: stretch; }
.tp-completed-actions { width: 100%; }
.tp-next-btn { width: 100%; justify-content: center; }
}
/* ── 가로모드 권장 배너 (모바일 세로일 때만 JS가 표시) ── */
.tp-mobile-tip {
display: flex; /* HTML 의 hidden 속성으로 토글 (모바일+세로일 때만 표시) */
align-items: center; gap: 10px;
padding: 12px 16px;
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
color: #fff;
border-radius: 8px;
font-size: 14px;
margin-bottom: 14px;
position: relative;
}
.tp-mobile-tip svg { flex-shrink: 0; }
.tp-mobile-tip span { flex: 1; line-height: 1.5; }
.tp-mobile-tip span b { font-weight: 800; }
.tp-mobile-tip-close {
background: rgba(255,255,255,0.15);
border: 0; color: #fff;
width: 44px; height: 44px; /* Apple HIG 44px+ 터치 타깃 */
border-radius: 50%;
font-size: 22px; font-weight: 700;
cursor: pointer;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
-webkit-tap-highlight-color: transparent;
line-height: 1;
}
.tp-mobile-tip-close:hover { background: rgba(255,255,255,0.25); }
/* ── 모바일 컴팩트 진행률 바 ──────────────────────── */
.tp-mobile-bar {
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 14px;
}
.tp-mobile-bar-row {
display: flex; align-items: center; gap: 12px;
margin-bottom: 10px;
font-size: 15px;
flex-wrap: wrap;
}
.tp-mobile-bar-state {
font-size: 14px; font-weight: 700;
padding: 5px 12px;
border-radius: 999px;
background: rgba(156,163,175,0.15);
color: #9ca3af;
letter-spacing: -0.01em;
white-space: nowrap;
}
.tp-mobile-bar-state.tp-state-playing { background: rgba(52,211,153,0.18); color: #34d399; }
.tp-mobile-bar-state.tp-state-paused { background: rgba(251,191,36,0.18); color: #fbbf24; }
.tp-mobile-bar-state.tp-state-hidden { background: rgba(248,113,113,0.18); color: #f87171; }
.tp-mobile-bar-state.tp-state-buffering { background: rgba(96,165,250,0.18); color: #60a5fa; }
.tp-mobile-bar-time {
flex: 1;
font-size: 15px; color: #ccc;
min-width: 0;
}
.tp-mobile-bar-time strong {
color: #fff; font-weight: 700; font-size: 16px;
}
.tp-mobile-bar-pct {
font-size: 18px; font-weight: 800;
color: #34d399;
white-space: nowrap;
}
/* 진행률 바 — 모바일에서 더 두껍게 가시성 강화 */
.tp-mobile-bar .tp-progress-bar {
height: 10px;
margin-bottom: 0;
}
/* ── details 접기/펼치기 — 상세 통계 ─────────────── */
.tp-stats-details {
background: transparent;
border-radius: 8px;
margin-bottom: 18px;
}
.tp-stats-summary {
font-size: 14px; color: #888;
cursor: pointer;
padding: 10px 0;
list-style: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.tp-stats-summary::-webkit-details-marker { display: none; }
.tp-stats-summary::after {
content: "▼";
font-size: 11px;
margin-left: 6px;
transition: transform .2s;
}
.tp-stats-details[open] .tp-stats-summary::after {
transform: rotate(180deg);
}
.tp-stats-details:not([open]) .tp-stats {
display: none;
}
/* ── 이어보기 배너 ─────────────────────────────────── */
.tp-resume {
background: rgba(52,211,153,0.08);
border: 1px solid #10b981;
border-radius: 8px;
padding: 18px 24px;
margin-bottom: 22px;
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.tp-resume-info {
display: flex; align-items: center; gap: 14px;
}
.tp-resume-icon {
font-size: 32px;
width: 50px; height: 50px;
display: flex; align-items: center; justify-content: center;
background: rgba(52,211,153,0.15);
border-radius: 50%;
color: #34d399;
}
.tp-resume-label {
font-size: 15px; color: #aaa;
margin-bottom: 4px;
}
.tp-resume-pos {
font-size: 18px; color: #fff; font-weight: 600;
}
.tp-resume-pos strong { color: #34d399; font-size: 22px; font-weight: 800; margin-right: 4px; }
.tp-resume-actions {
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
}
.tp-resume-auto {
font-size: 14px; color: #34d399; font-weight: 600;
}
.tp-resume-reset {
font-size: 14px; color: #aaa;
text-decoration: underline;
text-decoration-color: rgba(255,255,255,0.3);
text-underline-offset: 3px;
padding: 8px 14px;
border-radius: 4px;
transition: background .15s;
min-height: 36px; display: inline-flex; align-items: center;
}
.tp-resume-reset:hover { background: rgba(255,255,255,0.05); color: #fff; }
/* ── 연결 상태 인디케이터 ─────────────────────────── */
.tp-connection {
position: fixed;
top: 80px; right: 24px;
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 999px;
padding: 10px 18px;
font-size: 14px;
display: flex; align-items: center; gap: 8px;
z-index: 200;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
animation: tp-conn-pop .3s ease;
}
@keyframes tp-conn-pop { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.tp-connection.is-online { border-color: #10b981; }
.tp-connection.is-online .tp-conn-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px #10b981;
}
.tp-connection.is-offline { border-color: #ef4444; background: #2a1010; }
.tp-connection.is-offline .tp-conn-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #ef4444;
animation: tp-blink 1s infinite;
}
@keyframes tp-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.tp-conn-text { color: #ddd; }
/* ── 플레이어 ────────────────────────────────────── */
.tp-player-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 6px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.tp-player-wrap iframe,
.tp-player-wrap #ytplayer,
.tp-player-wrap video {
position: absolute; inset: 0;
width: 100% !important; height: 100% !important;
border: 0;
}
.tp-player-shield {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.65);
pointer-events: none;
z-index: 5;
transition: opacity .2s;
}
/* CSS specificity 보정 — `display:flex/grid/block` 이 `[hidden]` 기본동작을 덮어쓰는 문제 해결.
아래 셀렉터들은 모두 JS 가 setAttribute('hidden', '') / removeAttribute('hidden') 으로 토글한다. */
.tp-player-shield[hidden],
.tp-connection[hidden],
.tp-mobile-tip[hidden],
.tp-resume[hidden],
.te-spin[hidden],
.te-msg[hidden],
.te-selected[hidden],
.tp-toast[hidden],
.active-now-pill[hidden],
.dash-active-pill[hidden],
.cert-today[hidden],
.tl-cert-cta[hidden],
.tp-cert-cta-inactive[hidden],
.tp-cert-cta-active[hidden] {
display: none !important;
}
.tp-shield-msg {
background: #ff9500; color: #111;
padding: 14px 26px;
border-radius: 999px;
font-size: 16px; font-weight: 700;
}
.tp-extlink {
display: inline-block;
padding: 18px 36px;
background: #fff; color: #111;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
font-size: 17px;
margin: 20px 0;
min-height: 48px;
}
/* ── 상태 카드 ────────────────────────────────────── */
.tp-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 18px;
}
.tp-stat {
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 8px;
padding: 18px 20px;
}
.tp-stat-label {
font-size: 14px; color: #888;
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.tp-stat-value {
font-size: 22px; font-weight: 700;
color: #fff;
letter-spacing: -0.01em;
}
.tp-state-playing { color: #34d399 !important; }
.tp-state-paused { color: #fbbf24 !important; }
.tp-state-hidden { color: #f87171 !important; }
.tp-state-buffering{ color: #60a5fa !important; }
.tp-state-idle { color: #9ca3af !important; }
.tp-progress-bar {
width: 100%; height: 8px;
background: #2a2a2a;
border-radius: 999px;
overflow: hidden;
margin-bottom: 24px;
}
.tp-progress-bar > div {
height: 100%;
background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
transition: width .5s;
}
.tp-progress-bar > div.is-done {
background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}
.tp-notice {
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-left: 4px solid #ff9500;
padding: 18px 22px;
border-radius: 6px;
font-size: 16px; line-height: 1.7;
color: #ccc;
}
.tp-notice strong { color: #ff9500; margin-right: 6px; }
.tp-notice b { color: #fff; font-weight: 700; }
.tp-done {
margin-top: 24px;
padding: 26px 30px;
background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.05) 100%);
border: 1px solid #10b981;
border-radius: 8px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
color: #34d399;
font-size: 18px;
}
.tp-done strong { color: #10b981; font-size: 20px; margin-right: 8px; }
.tp-done-btn {
background: #10b981; color: #fff;
padding: 10px 22px;
border-radius: 4px;
text-decoration: none;
font-size: 14px; font-weight: 600;
}
.tp-done-btn:hover { background: #059669; color: #fff; }
/* ── 부드러운 이수 완료 알림 (영상 종료 전 비차단) ─── */
.tp-completion-notice {
position: fixed;
top: 16px; left: 50%;
transform: translateX(-50%) translateY(-200%);
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
padding: 14px 18px;
border-radius: 12px;
display: flex; align-items: center; gap: 12px;
box-shadow: 0 10px 30px rgba(16,185,129,0.35);
transition: transform .4s ease;
z-index: 9990;
max-width: calc(100% - 32px);
min-width: 320px;
}
.tp-completion-notice.show {
transform: translateX(-50%) translateY(0);
}
.tp-cn-icon {
width: 36px; height: 36px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 800;
flex-shrink: 0;
}
.tp-cn-body {
flex: 1;
min-width: 0;
}
.tp-cn-title {
font-size: 15px; font-weight: 800;
letter-spacing: -0.01em;
margin-bottom: 2px;
}
.tp-cn-sub {
font-size: 13px;
color: rgba(255,255,255,0.9);
line-height: 1.4;
}
.tp-cn-go {
background: rgba(255,255,255,0.25);
color: #fff;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px; font-weight: 700;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.3);
transition: background .15s;
}
.tp-cn-go:hover {
background: rgba(255,255,255,0.4);
color: #fff;
}
.tp-cn-close {
background: transparent;
border: 0;
color: rgba(255,255,255,0.7);
font-size: 22px;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
border-radius: 50%;
-webkit-tap-highlight-color: transparent;
line-height: 1;
}
.tp-cn-close:hover {
background: rgba(255,255,255,0.15);
color: #fff;
}
@media (max-width: 768px) {
.tp-completion-notice {
top: 12px;
left: 12px; right: 12px;
transform: translateY(-200%);
max-width: calc(100% - 24px);
min-width: 0;
padding: 12px 14px;
gap: 10px;
}
.tp-completion-notice.show { transform: translateY(0); }
.tp-cn-icon { width: 32px; height: 32px; font-size: 16px; }
.tp-cn-title { font-size: 14px; }
.tp-cn-sub { font-size: 12px; }
.tp-cn-go { padding: 7px 12px; font-size: 12px; }
}
/* ── 자동발급 토스트 ────────────────────────────── */
.tp-toast {
position: fixed; bottom: 30px; left: 50%;
transform: translateX(-50%) translateY(120%);
background: #10b981; color: #fff;
padding: 16px 28px;
border-radius: 999px;
font-size: 15px; font-weight: 600;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
transition: transform .4s ease;
z-index: 9999;
}
.tp-toast.show { transform: translateX(-50%) translateY(0); }
.tp-toast b { color: #fff; font-weight: 800; }
/* ── 영상시청 모바일 ────────────────────────────────── */
@media (max-width: 768px) {
.training-play {
padding: 12px 0 40px;
/* iOS dvh 단위 — 주소창 자동 숨김 시 viewport 변동 대응 */
min-height: 100dvh;
}
.tp-head {
flex-direction: row; /* 한 줄 — 공간 절약 */
align-items: center;
gap: 12px;
padding-bottom: 10px;
margin-bottom: 12px;
}
.tp-back {
font-size: 16px;
padding: 6px 10px;
min-height: 40px;
border-radius: 6px;
background: rgba(255,255,255,0.05);
}
.tp-back:hover, .tp-back:active { background: rgba(255,255,255,0.1); }
.tp-who { font-size: 13px; flex: 1; text-align: right; }
.tp-title { font-size: 19px; line-height: 1.35; margin-bottom: 4px; }
.tp-num { font-size: 11px; padding: 3px 9px; margin-right: 8px; display: inline-block; margin-bottom: 4px; }
.tp-meta { font-size: 14px; margin-bottom: 14px; }
/* 영상 — 풀-블리드 (좌우 끝까지 확장) */
.tp-player-wrap {
margin-left: -16px;
margin-right: -16px;
border-radius: 0;
margin-bottom: 0; /* 컴팩트 바와 붙임 */
}
/* 모바일 컴팩트 진행률 바 — 풀-블리드 후 12px 여백 */
.tp-mobile-bar {
margin-top: 0;
border-radius: 0 0 8px 8px;
border-top: 0;
margin-left: -16px;
margin-right: -16px;
padding: 12px 16px;
margin-bottom: 14px;
}
.tp-mobile-bar-row { font-size: 14px; gap: 10px; }
.tp-mobile-bar-state { font-size: 13px; padding: 4px 10px; }
.tp-mobile-bar-time { font-size: 14px; }
.tp-mobile-bar-time strong { font-size: 15px; }
.tp-mobile-bar-pct { font-size: 17px; }
.tp-mobile-bar .tp-progress-bar { height: 12px; } /* 더 두껍게 — 가시성 강화 */
/* 상세 통계 카드 — 모바일에서 기본 접힘 */
.tp-stats-details:not([open]) .tp-stats { display: none; }
.tp-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.tp-stat { padding: 12px 14px; }
.tp-stat-label { font-size: 13px; }
.tp-stat-value { font-size: 17px; }
/* 안내 박스들 콤팩트 */
.tp-notice { font-size: 14px; padding: 14px 16px; }
.tp-shield-msg { font-size: 14px; padding: 10px 18px; }
.tp-done {
flex-direction: column;
align-items: flex-start;
padding: 18px 18px;
font-size: 15px;
}
.tp-done strong { font-size: 17px; }
.tp-done-btn { width: 100%; text-align: center; padding: 14px; font-size: 16px; min-height: 48px; }
.tp-toast {
font-size: 14px;
padding: 14px 22px;
bottom: 20px;
left: 16px; right: 16px;
transform: translateY(120%);
border-radius: 12px;
text-align: center;
}
.tp-toast.show { transform: translateY(0); }
/* 강한 고지 — 모바일에서 기본 접힘 (collapsible) */
.tp-warn-collapsible { margin-bottom: 14px; }
.tp-warn-summary {
padding: 14px 16px;
font-size: 15px;
min-height: 48px;
}
.tp-warn-hint { font-size: 12px; }
.tp-warn { padding: 14px 16px 18px; }
.tp-warn-list { font-size: 14px; line-height: 1.7; }
.tp-warn-list li { padding-left: 18px; }
/* 이어보기 — 모바일 */
.tp-resume {
padding: 14px 16px;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-bottom: 14px;
}
.tp-resume-info { gap: 12px; }
.tp-resume-icon { font-size: 24px; width: 40px; height: 40px; }
.tp-resume-label { font-size: 13px; }
.tp-resume-pos { font-size: 15px; }
.tp-resume-pos strong { font-size: 18px; }
.tp-resume-actions { width: 100%; justify-content: space-between; gap: 8px; }
.tp-resume-auto { font-size: 13px; }
.tp-resume-reset {
font-size: 13px;
padding: 10px 16px;
background: rgba(255,255,255,0.06);
border-radius: 6px;
min-height: 40px;
}
/* 연결 상태 인디케이터 — 모바일 화면 위쪽 (영상 보다 위) */
.tp-connection {
top: 12px; bottom: auto;
right: 12px; left: 12px;
font-size: 13px;
justify-content: center;
}
}
/* ── 모바일 가로모드 (landscape) — 영상 최우선 ─────── */
@media (max-width: 900px) and (orientation: landscape) {
.training-play {
padding: 0 0 24px;
/* 가로모드에서도 노치 영역까지 사용 */
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.training-play .container { padding: 0; }
/* 가로에서 헤더는 영상 위 얇은 막대로 */
.tp-head {
padding: 8px 16px;
margin-bottom: 0;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(6px);
border-bottom: 0;
}
.tp-head + .tp-title,
.tp-title + .tp-meta {
/* 가로에서는 제목 영역 압축 */
}
.tp-title { font-size: 16px; padding: 0 16px; margin: 6px 0 2px; }
.tp-num { display: none; }
.tp-meta { font-size: 12px; padding: 0 16px; margin-bottom: 8px; }
/* 가로모드 권장 배너 자동 숨김 (이미 가로) */
.tp-mobile-tip { display: none !important; }
/* 영상 풀폭 + border-radius 0 */
.tp-player-wrap {
margin: 0;
border-radius: 0;
box-shadow: none;
}
/* 진행률 바 풀폭 + 컴팩트 */
.tp-mobile-bar {
margin: 0; padding: 8px 16px;
border-radius: 0;
}
.tp-mobile-bar-row { margin-bottom: 6px; font-size: 13px; }
.tp-mobile-bar .tp-progress-bar { height: 8px; }
/* 안내·이어보기 등은 가로에서 한 줄로 */
.tp-warn-collapsible,
.tp-resume {
margin: 8px 16px;
}
.tp-stats-details summary { padding: 6px 16px; }
}
/* ── 작은 화면 (iPhone SE 등) ───────────────────── */
@media (max-width: 380px) {
.tp-title { font-size: 19px; }
.tp-stat-value { font-size: 17px; }
.tp-stat { padding: 12px 14px; }
}
/* watch.php 하단 — 명단 누락 회원 안내 */
.te-missing {
margin-top: 24px; padding: 16px 20px;
background: #f0f9ff; border: 1px dashed #93c5fd;
border-radius: 10px; text-align: center;
font-size: 14px; color: #1e40af;
}
.te-missing-link {
margin-left: 8px; font-weight: 700; color: #1e3a8a;
text-decoration: none; padding: 6px 14px;
background: #fff; border: 1px solid #1e3a8a; border-radius: 6px;
display: inline-block; transition: all .15s;
}
.te-missing-link:hover { background: #1e3a8a; color: #fff; }
/* ═════════════════════════════════════════════════════════════
회원 신규 신청 (자가 가입) 페이지 — 좌우 15% 여백 (.container)
═════════════════════════════════════════════════════════════ */
.reg-section { padding: 50px 0 100px; background: #f8fafc; min-height: 60vh; }
.reg-head { text-align: center; margin-bottom: 36px; }
.reg-title { font-size: 36px; font-weight: 800; color: #0f172a; margin: 0 0 14px; letter-spacing: -0.02em; }
.reg-sub { font-size: 18px; color: #64748b; line-height: 1.7; margin: 0; }
/* 컨텐츠 폭은 .container (좌우 15% padding) 가 결정 — 폼은 가득 채움 */
.reg-form {
width: 100%;
background: #fff; border-radius: 18px;
padding: 40px 44px;
box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-bottom: 28px; }
.reg-field { display: flex; flex-direction: column; }
.reg-field-full { grid-column: 1 / -1; }
.reg-label { font-size: 18px; font-weight: 700; color: #334155; margin-bottom: 8px; }
.reg-req { color: #dc2626; }
.reg-input {
width: 100%; padding: 14px 18px; font-size: 18px;
border: 1px solid #cbd5e1; border-radius: 10px;
background: #fff; color: #0f172a;
transition: border-color .15s, box-shadow .15s;
font-family: inherit;
}
.reg-input:focus { outline: 0; border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(30,58,138,0.12); }
.reg-input:invalid { border-color: #fecaca; }
select.reg-input {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px;
}
.reg-notice {
background: #fef3c7; border-left: 5px solid #f59e0b;
padding: 18px 22px; border-radius: 8px; margin-bottom: 28px;
}
.reg-notice strong { display: block; margin-bottom: 10px; color: #78350f; font-size: 17px; }
.reg-notice ul { margin: 0; padding-left: 22px; color: #78350f; font-size: 16px; line-height: 1.85; }
.reg-notice ul strong { display: inline; color: #b91c1c; font-size: inherit; margin: 0; }
.reg-actions { display: flex; gap: 14px; justify-content: center; }
.reg-btn {
padding: 16px 44px; font-size: 18px; font-weight: 700;
border: 0; border-radius: 10px; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
transition: transform .15s, box-shadow .15s;
}
.reg-btn-primary { background: #1e3a8a; color: #fff; }
.reg-btn-primary:hover { background: #1e40af; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30,58,138,0.3); }
.reg-btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }
.reg-btn-light { background: #e2e8f0; color: #1e293b; }
.reg-btn-light:hover { background: #cbd5e1; color: #1e293b; }
@media (max-width: 992px) {
.reg-form { padding: 28px 24px; border-radius: 14px; }
.reg-grid { grid-template-columns: 1fr; gap: 16px; }
.reg-title { font-size: 28px; }
.reg-sub { font-size: 16px; }
.reg-input { font-size: 17px; padding: 13px 16px; }
.reg-label { font-size: 17px; }
.reg-notice ul { font-size: 15px; }
.reg-actions { flex-direction: column; }
.reg-btn { padding: 14px; font-size: 17px; }
}
/* ═════════════════════════════════════════════════════════════
관리자 — 신규 가입 대기 위젯 (대시보드)
═════════════════════════════════════════════════════════════ */
.pending-card .card-title { flex-wrap: wrap; gap: 6px; }
.pending-table tbody tr { transition: background .15s; }
.pending-table tbody tr:hover { background: #fff8e1; }
.pending-table .pending-name { color: #1e3a8a; font-weight: 600; text-decoration: none; }
.pending-table .pending-name:hover { text-decoration: underline; }
/* 모달 */
.pending-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
}
.pending-modal[hidden] { display: none; }
.pending-modal-back {
position: absolute; inset: 0;
background: rgba(15,23,42,0.55);
backdrop-filter: blur(2px);
}
.pending-modal-box {
position: relative; background: #fff; border-radius: 14px;
width: 92%; max-width: 520px; max-height: 90vh; overflow-y: auto;
padding: 28px 28px 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.pending-modal-close {
position: absolute; top: 10px; right: 14px;
background: transparent; border: 0; font-size: 28px;
color: #94a3b8; cursor: pointer; line-height: 1;
}
.pending-modal-close:hover { color: #475569; }
.pending-modal-title {
font-size: 18px; font-weight: 800; color: #0f172a;
margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid #1e3a8a;
}
.pending-modal-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.pending-modal-table th, .pending-modal-table td {
padding: 8px 10px; font-size: 14px;
border-bottom: 1px solid #e2e8f0;
text-align: left; vertical-align: top;
}
.pending-modal-table th {
width: 100px; background: #f8fafc; font-weight: 700; color: #475569;
}
.pending-modal-table td { color: #0f172a; word-break: break-all; }
.pending-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* ═════════════════════════════════════════════════════════════
(사)한국교습소총연합회 가입 안내 + 신청 페이지
═════════════════════════════════════════════════════════════ */
.join-section { padding: 60px 0 100px; background: #f1f5f9; }
.join-head { text-align: center; margin-bottom: 40px; }
.join-tag {
display: inline-block; padding: 6px 14px;
background: #1e3a8a; color: #fff;
font-size: 12px; font-weight: 700;
letter-spacing: 0.2em;
border-radius: 999px;
}
.join-title { font-size: 34px; font-weight: 800; color: #0f172a; margin: 14px 0 10px; letter-spacing: -0.02em; }
.join-subtitle { font-size: 17px; color: #64748b; margin: 0; }
.join-card {
background: #fff; border-radius: 16px;
padding: 34px 36px; margin-bottom: 24px;
box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}
.join-card-title {
font-size: 22px; font-weight: 800;
color: #1e3a8a;
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 2px solid #1e3a8a;
}
/* ── 정회원 여부 확인 박스 ── */
.join-mcheck-card {
text-align: center;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
border: 2px solid #f59e0b;
position: relative;
overflow: hidden;
}
.join-mcheck-card::before {
content: '?';
position: absolute;
top: -30px; right: -10px;
font-size: 180px; font-weight: 900;
color: rgba(245, 158, 11, .12);
line-height: 1;
pointer-events: none;
}
.join-mcheck-title {
position: relative;
font-size: 30px !important;
font-weight: 800 !important;
color: #78350f !important;
margin: 0 0 12px !important;
letter-spacing: -.015em;
border: 0 !important;
padding: 0 !important;
}
.join-mcheck-em {
background: linear-gradient(135deg, #b45309, #92400e);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.1em !important;
letter-spacing: -.02em;
}
.join-mcheck-sub {
font-size: 16px !important;
color: #92400e !important;
margin: 0 0 26px !important;
line-height: 1.7;
}
.join-mcheck-form {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 10px;
max-width: 920px;
margin: 0 auto;
}
.join-mcheck-input {
height: 56px;
padding: 0 18px;
font-size: 16px !important;
font-weight: 600;
color: #1e293b;
background: #fff;
border: 2px solid #fcd34d;
border-radius: 10px;
transition: border-color .2s, box-shadow .2s;
font-family: inherit;
}
.join-mcheck-input:focus {
outline: none;
border-color: #b45309;
box-shadow: 0 0 0 4px rgba(180, 83, 9, .15);
}
.join-mcheck-input::placeholder { color: #cbd5e1; font-weight: 500; }
.join-mcheck-btn {
height: 56px;
padding: 0 32px;
font-size: 17px;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
border: 0;
border-radius: 10px;
cursor: pointer;
letter-spacing: .05em;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 8px 22px -6px rgba(180, 83, 9, .55);
white-space: nowrap;
}
.join-mcheck-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -6px rgba(180, 83, 9, .7);
}
.join-mcheck-btn:active { transform: translateY(0); }
@media (max-width: 768px) {
.join-mcheck-card::before { font-size: 130px; top: -20px; right: -10px; }
.join-mcheck-title { font-size: 23px !important; }
.join-mcheck-sub { font-size: 14px !important; margin-bottom: 20px !important; }
.join-mcheck-form { grid-template-columns: 1fr; gap: 8px; }
.join-mcheck-input { height: 50px; font-size: 15px !important; }
.join-mcheck-btn { height: 52px; font-size: 16px; }
}
/* 인사말 */
.join-greeting p { font-size: 17px; line-height: 1.85; color: #334155; margin: 0 0 12px; }
.join-greeting p:last-child { margin-bottom: 0; }
.join-greeting strong { color: #1e3a8a; }
.join-greeting-emph {
background: #eff6ff;
border-left: 4px solid #1e3a8a;
padding: 14px 18px !important;
margin: 14px 0 !important;
font-size: 18px !important;
border-radius: 4px;
}
/* AI 프로젝트 카드 */
.join-card-ai {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
color: #fff;
}
.join-card-ai .join-card-title { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.join-ai-body p { font-size: 17px; line-height: 1.85; margin: 0 0 14px; }
.join-ai-body strong { color: #fcd34d; }
.join-ai-lead { font-size: 18px !important; }
.join-ai-quote {
margin: 16px 0;
padding: 18px 22px;
background: rgba(255,255,255,0.12);
border-left: 4px solid #fcd34d;
border-radius: 6px;
font-size: 17px;
font-style: italic;
font-weight: 600;
line-height: 1.7;
}
.join-ai-bullets { padding-left: 22px; margin: 14px 0; }
.join-ai-bullets li { font-size: 17px; line-height: 1.85; margin-bottom: 6px; }
.join-ai-cta {
margin-top: 18px !important;
padding: 14px 18px;
background: rgba(252,211,77,0.18);
border-radius: 8px;
font-size: 18px !important;
font-weight: 700;
text-align: center;
}
/* 개인정보 동의 */
.join-priv-row { padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
.join-priv-row:last-of-type { border-bottom: 0; }
.join-priv-row strong { display: block; font-size: 16px; color: #1e3a8a; margin-bottom: 6px; }
.join-priv-row p { font-size: 15px; color: #475569; line-height: 1.7; margin: 0; }
.join-priv-agree {
margin-top: 18px; padding: 18px 20px;
background: #fef3c7; border: 2px solid #f59e0b;
border-radius: 10px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.join-priv-question { font-size: 16px; font-weight: 700; color: #78350f; flex: 1 1 100%; }
.join-priv-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.join-priv-radio input { width: 20px; height: 20px; cursor: pointer; }
.join-priv-mark {
font-size: 17px; font-weight: 700; padding: 6px 18px;
background: #fff; border: 2px solid #1e3a8a; color: #1e3a8a;
border-radius: 6px;
}
.join-priv-mark-no { border-color: #94a3b8; color: #475569; }
.join-priv-radio input:checked + .join-priv-mark {
background: #1e3a8a; color: #fff;
}
.join-priv-radio input:checked + .join-priv-mark-no {
background: #475569; color: #fff; border-color: #475569;
}
/* 입력 폼 */
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.join-field { display: flex; flex-direction: column; }
.join-field-full { grid-column: 1 / -1; }
.join-label { font-size: 16px; font-weight: 700; color: #334155; margin-bottom: 8px; }
.join-req { color: #dc2626; }
.join-input {
width: 100%; padding: 13px 16px; font-size: 16px;
border: 1px solid #cbd5e1; border-radius: 10px;
background: #fff; color: #0f172a;
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
}
.join-input:focus { outline: 0; border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(30,58,138,0.12); }
select.join-input {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px;
}
/* 회비 카드 */
.join-card-fee { background: #fafaf9; border: 2px dashed #d4d4d8; }
.join-fee-box {
background: #fff; border-radius: 12px;
padding: 22px 26px;
}
.join-fee-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 12px 0; border-bottom: 1px solid #e2e8f0;
}
.join-fee-row:last-child { border-bottom: 0; }
.join-fee-label { font-size: 16px; font-weight: 700; color: #334155; }
.join-fee-value { font-size: 17px; color: #0f172a; }
.join-fee-value strong { font-size: 26px; color: #b91c1c; font-weight: 800; }
.join-fee-value small { color: #64748b; font-size: 14px; margin-left: 8px; }
.join-fee-tbd { color: #94a3b8; font-style: italic; font-size: 15px; }
/* 계좌 안내 (7개 은행) */
.join-acc-intro {
margin-top: 22px;
padding: 18px 22px;
background: #fef3c7;
border-left: 4px solid #f59e0b;
border-radius: 0 8px 8px 0;
font-size: 16px;
line-height: 1.7;
color: #78350f;
}
.join-acc-intro strong { color: #92400e; font-weight: 800; }
.join-acc-list {
margin: 18px 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.join-acc-list li {
display: grid;
grid-template-columns: 100px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 18px;
background: #fff;
border: 1px solid #e2e8f0;
border-left: 4px solid #1e3a8a;
border-radius: 10px;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.join-acc-list li:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15,23,42,0.08);
border-color: #1e3a8a;
}
/* 은행별 좌측 컬러 액센트 */
.acc-shinhan { border-left-color: #0046ff; }
.acc-kb { border-left-color: #ffbc00; }
.acc-ibk { border-left-color: #002463; }
.acc-woori { border-left-color: #0066b3; }
.acc-nh { border-left-color: #009b3a; }
.acc-hana { border-left-color: #008c91; }
.acc-keb { border-left-color: #d32f2f; }
.acc-bank {
font-size: 14px; font-weight: 800;
color: #475569;
letter-spacing: -0.01em;
}
.acc-num {
font-size: 17px; font-weight: 700;
color: #0f172a;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.acc-copy {
flex-shrink: 0;
padding: 6px 12px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 12px; font-weight: 700;
color: #475569;
cursor: pointer;
font-family: inherit;
transition: background .2s, color .2s, border-color .2s;
}
.acc-copy:hover {
background: #1e3a8a;
color: #fff;
border-color: #1e3a8a;
}
.acc-copy.is-done {
background: #10b981 !important;
color: #fff !important;
border-color: #10b981 !important;
}
@media (max-width: 768px) {
.join-acc-list { grid-template-columns: 1fr; gap: 8px; }
.join-acc-list li { grid-template-columns: 88px 1fr auto; gap: 10px; padding: 12px 14px; }
.acc-bank { font-size: 13px; }
.acc-num { font-size: 16px; }
}
@media (max-width: 480px) {
.join-acc-list li { grid-template-columns: 80px 1fr; }
.acc-copy { grid-column: 1 / -1; justify-self: end; }
.acc-num { font-size: 15px; }
}
/* ============================================================
게시판 목록 (.bd-section) — 좌우 15% + 깔끔한 테이블
============================================================ */
.bd-section {
padding: 50px 0 80px;
background: #fff;
}
/* 페이지 헤더 */
.bd-head {
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 2px solid #1e3a8a;
}
.bd-head-en {
display: block;
font-size: 13px; font-weight: 800; letter-spacing: 0.3em;
color: #2563eb;
margin-bottom: 8px;
}
.bd-head-title {
font-size: 36px; font-weight: 900;
color: #0f172a;
margin: 0 0 10px;
letter-spacing: -0.02em;
}
.bd-head-desc {
font-size: 15px;
color: #64748b;
margin: 8px 0 0;
}
.bd-head-meta {
margin-top: 12px;
font-size: 14px;
color: #64748b;
}
.bd-head-meta strong { color: #1e3a8a; font-weight: 800; }
/* 툴바 (검색 + 글쓰기) */
.bd-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
padding: 14px 18px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
align-items: center;
}
.bd-select, .bd-input {
height: 42px;
padding: 0 14px;
font-size: 15px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #0f172a;
font-family: inherit;
}
.bd-select { min-width: 110px; }
.bd-input { flex: 1; min-width: 180px; }
.bd-select:focus, .bd-input:focus {
outline: 0;
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.10);
}
.bd-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 42px;
padding: 0 18px;
border: 0;
border-radius: 8px;
font-size: 15px; font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: background .2s, transform .15s;
font-family: inherit;
}
.bd-btn-search { background: #475569; color: #fff; }
.bd-btn-search:hover { background: #1e3a8a; }
.bd-btn-write {
background: #1e3a8a; color: #fff;
margin-left: auto;
}
.bd-btn-write:hover { background: #1e40af; transform: translateY(-1px); color: #fff; }
/* 테이블 */
.bd-list-wrap {
border-top: 2px solid #1e3a8a;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 30px;
}
.bd-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.bd-table thead {
background: #f8fafc;
}
.bd-table th {
padding: 14px 10px;
font-size: 13px; font-weight: 800;
color: #475569;
letter-spacing: 0.05em;
border-bottom: 1px solid #cbd5e1;
white-space: nowrap;
}
.bd-th-no { width: 80px; text-align: center; }
.bd-th-ca { width: 100px; text-align: center; }
.bd-th-subject { text-align: left; padding-left: 16px !important; }
.bd-th-name { width: 130px; text-align: center; }
.bd-th-hit { width: 80px; text-align: center; }
.bd-th-date { width: 110px; text-align: center; }
.bd-table tbody tr {
transition: background .15s;
}
.bd-table tbody tr:not(.is-notice):hover {
background: #f8fafc;
}
.bd-table tbody tr.is-notice {
background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 100%);
}
.bd-table tbody tr.is-notice:hover {
background: linear-gradient(90deg, #fde68a 0%, #fef3c7 100%);
}
.bd-table td {
padding: 16px 10px;
border-bottom: 1px solid #f1f5f9;
font-size: 15px;
color: #334155;
}
.bd-td-no { text-align: center; font-size: 13px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.bd-no-num { font-weight: 700; }
.bd-tag-notice {
display: inline-block;
padding: 4px 10px;
background: #f59e0b;
color: #fff;
font-size: 12px; font-weight: 800;
border-radius: 4px;
letter-spacing: 0.05em;
}
.bd-td-ca { text-align: center; }
.bd-cat {
display: inline-block;
padding: 4px 10px;
background: #eff6ff;
color: #1e3a8a;
font-size: 12px; font-weight: 700;
border-radius: 4px;
}
.bd-td-subject { padding-left: 16px !important; }
.bd-reply-mark { color: #94a3b8; margin-right: 4px; }
.bd-subject {
color: #0f172a;
text-decoration: none;
font-weight: 600;
transition: color .15s;
}
.bd-subject:hover { color: #1e3a8a; text-decoration: underline; text-underline-offset: 3px; }
.bd-badge {
display: inline-flex; align-items: center; gap: 2px;
margin-left: 6px;
padding: 2px 8px;
font-size: 11px; font-weight: 800;
border-radius: 999px;
vertical-align: middle;
}
.bd-badge-cmt { background: #1e3a8a; color: #fff; }
.bd-badge-file { background: #f1f5f9; color: #64748b; padding: 4px 6px; }
.bd-badge-new { background: #dc2626; color: #fff; padding: 2px 7px; }
.bd-td-name { text-align: center; font-size: 14px; color: #475569; }
.bd-td-hit { text-align: center; font-size: 13px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.bd-td-date { text-align: center; font-size: 13px; color: #64748b; font-variant-numeric: tabular-nums; }
/* 빈 상태 */
.bd-empty {
padding: 80px 20px !important;
text-align: center;
}
.bd-empty-ico {
display: inline-block;
color: #cbd5e1;
margin-bottom: 16px;
}
.bd-empty-msg {
font-size: 16px;
color: #94a3b8;
}
/* ── 갤러리 본문 사진 그리드 (view.php) ── */
.bd-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
margin: 0 0 28px;
}
.bd-photo-cell {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 10px;
background: #f1f5f9;
position: relative;
transition: transform .25s, box-shadow .25s;
}
.bd-photo-cell:hover { transform: scale(1.02); box-shadow: 0 12px 30px -10px rgba(15,23,42,.3); }
.bd-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-photo-cell::after {
content: '🔍';
position: absolute; right: 8px; bottom: 8px;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: rgba(15,23,42,.7); color: #fff;
border-radius: 50%; font-size: 12px;
opacity: 0; transition: opacity .2s;
}
.bd-photo-cell:hover::after { opacity: 1; }
@media (max-width: 600px) {
.bd-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
/* ── 갤러리형 게시판 (썸네일 카드 그리드) ── */
.gal-wrap { margin-top: 4px; }
.gal-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px 22px;
list-style: none;
padding: 0;
margin: 0 0 36px;
}
.gal-card {
position: relative;
background: #fff;
border-radius: 14px;
overflow: hidden;
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.gal-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .25); }
.gal-card.is-notice { box-shadow: 0 0 0 2px #f59e0b inset; }
.gal-link { display: block; color: inherit; text-decoration: none; }
/* 썸네일 — 4:3 비율 고정 */
.gal-thumb {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f1f5f9;
}
.gal-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.gal-card:hover .gal-thumb img { transform: scale(1.06); }
.gal-thumb-fallback {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; color: #cbd5e1;
}
.gal-thumb-fallback span { font-size: 11px; font-weight: 700; letter-spacing: .12em; }
/* 배지 */
.gal-badge {
position: absolute;
display: inline-flex; align-items: center; gap: 4px;
height: 24px; padding: 0 10px;
font-size: 11px; font-weight: 700; letter-spacing: .04em;
border-radius: 999px;
backdrop-filter: blur(6px);
}
.gal-badge-notice {
top: 10px; left: 10px;
background: #f59e0b; color: #fff;
}
.gal-badge-new {
top: 10px; left: 10px;
background: #ef4444; color: #fff;
animation: galPulse 2.4s ease-in-out infinite;
}
@keyframes galPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.gal-badge-multi {
top: 10px; right: 10px;
background: rgba(15, 23, 42, .75); color: #fff;
}
/* 카드 정보 */
.gal-info {
padding: 16px 4px 6px;
}
.gal-cat {
display: inline-block;
margin-bottom: 8px;
padding: 3px 10px;
background: #eff6ff;
color: #1e3a8a;
border-radius: 4px;
font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.gal-title {
font-size: 16px; font-weight: 700;
color: #0f172a;
line-height: 1.4;
margin: 0 0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gal-card:hover .gal-title { color: #1e3a8a; }
.gal-cmt { color: #ef4444; font-weight: 700; }
.gal-meta {
display: flex; flex-wrap: wrap; gap: 10px;
font-size: 12px; color: #94a3b8;
}
.gal-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.gal-meta-name { color: #475569; font-weight: 600; }
/* 빈 상태 */
.gal-empty {
padding: 80px 20px;
text-align: center;
background: #f8fafc;
border-radius: 14px;
border: 2px dashed #e2e8f0;
}
.gal-empty .bd-empty-ico { color: #cbd5e1; margin-bottom: 12px; }
.gal-empty .bd-empty-msg { color: #94a3b8; font-size: 15px; }
/* 반응형 */
@media (max-width: 1200px) {
.gal-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
}
@media (max-width: 768px) {
.gal-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
.gal-info { padding: 12px 2px 4px; }
.gal-title { font-size: 14px; margin-bottom: 6px; }
.gal-meta { font-size: 11px; gap: 8px; }
.gal-meta-hit svg, .gal-meta-name svg { display: none; }
.gal-badge { height: 22px; font-size: 10px; padding: 0 8px; }
}
@media (max-width: 420px) {
.gal-grid { grid-template-columns: 1fr; gap: 16px; }
.gal-card { border-radius: 10px; }
.gal-thumb { aspect-ratio: 16 / 10; }
}
/* 페이지네이션 — ① 정보 텍스트(위) → ② 페이지 박스(아래) */
.bd-pagination {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.bd-pagination .pg-info {
font-size: 13px;
color: #64748b;
letter-spacing: .01em;
}
.bd-pagination .pg-info strong { color: #1e3a8a; font-weight: 700; }
.bd-pagination .pg-nav {
display: flex;
justify-content: center;
}
.bd-pagination ul,
.bd-pagination .pagination {
display: flex;
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
}
.bd-pagination a, .bd-pagination span,
.bd-pagination .page-link {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px;
padding: 0 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 14px; font-weight: 600;
color: #475569;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.bd-pagination a:hover, .bd-pagination .page-link:hover {
background: #f1f5f9;
border-color: #1e3a8a;
color: #1e3a8a;
}
.bd-pagination .active a, .bd-pagination .active span,
.bd-pagination .active .page-link {
background: #1e3a8a;
color: #fff;
border-color: #1e3a8a;
}
/* pg-info 안의 page-link/span 은 페이지 박스 스타일을 받지 않게 초기화 */
.bd-pagination .pg-info span,
.bd-pagination .pg-info strong {
display: inline; min-width: 0; height: auto; padding: 0;
background: transparent; border: 0; border-radius: 0;
font-size: inherit; color: inherit;
}
/* 모바일 — 테이블을 카드형으로 */
@media (max-width: 768px) {
.bd-section { padding: 30px 0 60px; }
.bd-head { margin-bottom: 20px; padding-bottom: 18px; }
.bd-head-title { font-size: 26px; }
.bd-head-desc { font-size: 14px; }
.bd-toolbar { padding: 10px; gap: 6px; }
.bd-select, .bd-input { height: 40px; font-size: 14px; }
.bd-input { flex: 1 1 100%; order: 99; }
.bd-btn { height: 40px; padding: 0 14px; font-size: 14px; }
.bd-btn-write { margin-left: 0; flex: 1; justify-content: center; }
.bd-btn-search span { display: none; } /* 모바일은 아이콘만 */
/* 테이블을 카드형으로 변환 */
.bd-list-wrap { border-top-width: 3px; }
.bd-table thead { display: none; }
.bd-table, .bd-table tbody, .bd-table tr, .bd-table td { display: block; width: 100%; }
.bd-table tr {
padding: 14px 12px;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.bd-table tr.is-notice { padding-left: 16px; border-left: 4px solid #f59e0b; }
.bd-table td {
padding: 4px 0;
border-bottom: 0;
font-size: 14px;
}
.bd-table td::before {
content: attr(data-label) ' · ';
font-size: 12px; font-weight: 700;
color: #94a3b8;
margin-right: 4px;
}
/* 제목은 라벨 숨기고 큰 글씨 */
.bd-td-subject { padding-left: 0 !important; padding-bottom: 8px !important; font-size: 16px !important; }
.bd-td-subject::before { display: none; }
.bd-subject { font-size: 16px; font-weight: 700; }
/* 메타 정보 한 줄에 묶음 */
.bd-td-no { display: inline-block !important; width: auto !important; padding-right: 10px !important; }
.bd-td-no::before { display: none; }
.bd-td-ca { display: inline-block !important; width: auto !important; padding-right: 10px !important; padding-left: 0 !important; }
.bd-td-ca::before { display: none; }
.bd-td-name, .bd-td-hit, .bd-td-date {
display: inline-block !important;
width: auto !important;
padding: 0 12px 0 0 !important;
font-size: 12px !important;
color: #94a3b8;
}
.bd-pagination a, .bd-pagination .page-link { min-width: 34px; height: 34px; font-size: 13px; }
}
@media (max-width: 480px) {
.bd-head-title { font-size: 22px; }
.bd-table tr { padding: 12px 10px; }
.bd-subject { font-size: 15px; }
}
/* ── 게시판 글쓰기 폼 ── */
.bd-form {
margin-top: 20px;
padding: 28px 32px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.bd-field { margin-bottom: 22px; }
.bd-field:last-child { margin-bottom: 0; }
.bd-label {
display: block;
font-size: 15px; font-weight: 700;
color: #334155;
margin-bottom: 8px;
}
.bd-label-hint {
font-size: 13px; font-weight: 500;
color: #94a3b8;
margin-left: 6px;
}
.bd-req { color: #dc2626; }
.bd-input {
width: 100%;
padding: 12px 16px;
font-size: 16px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #0f172a;
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
}
.bd-input:focus {
outline: 0;
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.10);
}
.bd-textarea {
min-height: 240px;
resize: vertical;
font-family: 'Pretendard Variable','Pretendard',sans-serif;
line-height: 1.7;
}
select.bd-input {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
/* 파일 슬롯 (다중 파일 첨부) */
.bd-file-slots {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 10px;
}
.bd-file-slot {
display: flex; align-items: center; gap: 12px;
padding: 8px 12px;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 8px;
transition: border-color .15s;
}
.bd-file-slot:hover { border-color: #94a3b8; }
.bd-file-slot input[type="file"] {
/* 숨기고 라벨로 트리거 */
position: absolute;
width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.bd-file-btn {
display: inline-flex; align-items: center; gap: 4px;
flex-shrink: 0;
padding: 7px 16px;
background: #1e3a8a; color: #fff;
border-radius: 6px;
font-size: 13px; font-weight: 700;
cursor: pointer;
transition: background .15s;
}
.bd-file-btn:hover { background: #1e40af; }
.bd-file-name {
flex: 1;
font-size: 14px;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bd-file-name.is-selected {
color: #0f172a;
font-weight: 600;
}
.bd-file-clear {
flex-shrink: 0;
width: 26px; height: 26px;
border: 0;
background: #ef4444;
color: #fff;
border-radius: 50%;
font-size: 16px; font-weight: 700;
cursor: pointer;
line-height: 1;
padding: 0;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.bd-file-clear:hover { background: #b91c1c; }
.bd-file-add {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 4px;
padding: 8px 14px;
background: #f1f5f9;
border: 1px dashed #94a3b8;
border-radius: 6px;
font-size: 13px; font-weight: 700;
color: #475569;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
font-family: inherit;
}
.bd-file-add:hover {
background: #1e3a8a; color: #fff; border-color: #1e3a8a; border-style: solid;
}
.bd-file-full {
margin: 10px 0 0;
padding: 10px 14px;
background: #fef3c7;
border-left: 4px solid #f59e0b;
border-radius: 4px;
font-size: 13px; color: #78350f;
}
/* 기존 파일 목록 (수정 모드) */
.bd-file-list {
list-style: none;
margin: 0 0 12px; padding: 0;
}
.bd-file-list li {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: 6px;
margin-bottom: 6px;
font-size: 14px;
}
.bd-file-list li em {
font-style: normal;
color: #065f46;
font-size: 13px;
}
.bd-field-check { padding: 12px 0; }
.bd-check-label {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer;
font-size: 15px; font-weight: 600;
color: #475569;
}
.bd-check-label input { width: 18px; height: 18px; cursor: pointer; }
.bd-form-actions {
display: flex; gap: 10px;
padding-top: 20px;
margin-top: 12px;
border-top: 1px solid #e2e8f0;
}
.bd-btn-primary {
background: #1e3a8a; color: #fff;
padding: 12px 28px !important;
}
.bd-btn-primary:hover { background: #1e40af; }
.bd-btn-cancel {
background: #e2e8f0; color: #475569;
padding: 12px 28px;
border-radius: 8px;
text-decoration: none;
font-size: 15px; font-weight: 700;
display: inline-flex; align-items: center;
}
.bd-btn-cancel:hover { background: #cbd5e1; color: #1e293b; }
@media (max-width: 768px) {
.bd-form { padding: 22px 18px; }
.bd-input { font-size: 15px; padding: 11px 14px; }
.bd-textarea { min-height: 200px; }
.bd-form-actions { flex-direction: column; }
.bd-btn-cancel, .bd-btn-primary { justify-content: center; padding: 13px !important; }
}
/* ── 게시글 본문 뷰 ── */
.bd-post {
background: #fff;
border-top: 3px solid #1e3a8a;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 30px;
}
.bd-post-head {
padding: 28px 8px 22px;
border-bottom: 1px solid #e2e8f0;
}
.bd-post-head .bd-cat { display: inline-block; margin-bottom: 10px; }
.bd-post-title {
font-size: 26px; font-weight: 800;
color: #0f172a;
margin: 0 0 16px;
line-height: 1.4;
letter-spacing: -0.02em;
}
.bd-post-meta {
display: flex; flex-wrap: wrap; gap: 20px;
font-size: 13px;
color: #64748b;
}
.bd-meta-item {
display: inline-flex; align-items: center; gap: 6px;
}
.bd-post-content {
padding: 30px 8px;
font-size: 16px;
line-height: 1.85;
color: #1e293b;
min-height: 200px;
}
.bd-post-content p { margin: 0 0 16px; }
.bd-post-content img { max-width: 100%; height: auto; border-radius: 6px; }
.bd-post-content a { color: #1e3a8a; }
.bd-post-content table { border-collapse: collapse; margin: 16px 0; }
.bd-post-content table td, .bd-post-content table th { padding: 8px 12px; border: 1px solid #e2e8f0; }
.bd-post-content blockquote {
margin: 16px 0; padding: 14px 20px;
background: #f8fafc; border-left: 4px solid #1e3a8a;
color: #475569; font-style: italic;
}
.bd-post-content ul, .bd-post-content ol { padding-left: 24px; margin: 16px 0; }
.bd-post-content li { margin-bottom: 6px; }
/* 첨부파일 */
.bd-post-files {
padding: 18px 8px;
border-top: 1px dashed #e2e8f0;
}
.bd-post-files h4 {
margin: 0 0 12px;
font-size: 14px; font-weight: 800;
color: #475569;
}
.bd-post-files ul { list-style: none; padding: 0; margin: 0; }
.bd-post-files li { margin-bottom: 6px; }
.bd-post-files li a {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
text-decoration: none;
color: #1e293b;
font-size: 14px;
transition: border-color .15s;
}
.bd-post-files li a:hover { border-color: #1e3a8a; color: #1e3a8a; }
.bd-file-size { color: #94a3b8; font-size: 13px; }
/* 액션 버튼 영역 */
.bd-post-actions {
display: flex; gap: 10px; flex-wrap: wrap;
margin-bottom: 24px;
}
/* 이전/다음 */
.bd-prev-next {
display: flex; flex-direction: column;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 30px;
overflow: hidden;
}
.bd-pn-item {
display: grid;
grid-template-columns: 110px 1fr;
gap: 18px;
padding: 14px 20px;
text-decoration: none;
color: #1e293b;
border-bottom: 1px solid #e2e8f0;
transition: background .15s;
}
.bd-pn-item:last-child { border-bottom: 0; }
.bd-pn-item:hover { background: #f8fafc; color: #1e3a8a; }
.bd-pn-label { font-size: 13px; font-weight: 700; color: #64748b; }
.bd-pn-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 댓글 */
.bd-comments {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 22px 24px;
}
.bd-cmt-head {
font-size: 17px; font-weight: 800;
color: #0f172a;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid #1e3a8a;
}
.bd-cmt-head span { color: #1e3a8a; }
.bd-cmt-list { list-style: none; padding: 0; margin: 0 0 18px; }
.bd-cmt-list > li {
padding: 14px 16px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
margin-bottom: 8px;
}
.bd-cmt-list > li.bd-cmt-empty {
text-align: center;
color: #94a3b8;
background: transparent;
border: 1px dashed #cbd5e1;
padding: 28px;
}
.bd-cmt-meta {
display: flex; justify-content: space-between;
font-size: 13px;
margin-bottom: 6px;
}
.bd-cmt-meta strong { color: #1e3a8a; font-weight: 700; }
.bd-cmt-meta span { color: #94a3b8; }
.bd-cmt-content { font-size: 14px; line-height: 1.7; color: #334155; }
.bd-cmt-form { display: grid; gap: 8px; }
.bd-cmt-form button { justify-self: flex-end; padding: 10px 22px !important; }
.bd-cmt-login {
text-align: center; padding: 18px;
background: #fff;
border: 1px dashed #cbd5e1;
border-radius: 6px;
color: #94a3b8;
font-size: 14px;
}
@media (max-width: 768px) {
.bd-post-title { font-size: 22px; }
.bd-post-meta { gap: 10px; font-size: 12px; }
.bd-post-content { padding: 20px 4px; font-size: 15px; }
.bd-pn-item { grid-template-columns: 80px 1fr; gap: 12px; padding: 12px 14px; }
.bd-comments { padding: 18px 16px; }
}
.join-fee-note { margin: 14px 0 0; font-size: 14px; color: #78350f; text-align: center; }
/* 액션 */
.join-actions { display: flex; gap: 14px; justify-content: center; margin-top: 32px; }
.join-btn {
padding: 16px 48px; font-size: 18px; font-weight: 700;
border: 0; border-radius: 10px; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
transition: transform .15s, box-shadow .15s;
}
.join-btn-primary { background: #1e3a8a; color: #fff; }
.join-btn-primary:hover { background: #1e40af; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30,58,138,0.3); }
.join-btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }
.join-btn-light { background: #e2e8f0; color: #1e293b; }
.join-btn-light:hover { background: #cbd5e1; color: #1e293b; }
@media (max-width: 992px) {
.join-card { padding: 24px 22px; border-radius: 12px; }
.join-title { font-size: 26px; }
.join-card-title { font-size: 19px; }
.join-grid { grid-template-columns: 1fr; gap: 16px; }
.join-greeting p, .join-ai-body p, .join-ai-bullets li { font-size: 16px; }
.join-actions { flex-direction: column; }
.join-btn { padding: 14px; font-size: 17px; }
}
/* ═════════════════════════════════════════════════════════════
★ 전역 폰트 18px 통일 + 모바일 최적화 (Galaxy / iPhone)
═════════════════════════════════════════════════════════════ */
/* 본문 콘텐츠 영역 — 단락·목록·표·인용 모두 18px */
.site-main p,
.site-main li,
.site-main td,
.site-main th,
.site-main blockquote,
.site-main label,
.site-main span:not(.badge):not(.tag):not([class*="num"]):not([class*="lbl"]):not([class*="-stamp"]):not([class*="brand"]):not([class*="ico"]) {
font-size: 18px;
line-height: 1.7;
}
/* iOS Safari — 입력시 자동 확대(zoom) 방지를 위해 16px 이상 보장 (18px 권장) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
font-size: 18px; /* iOS 16px 미만 시 zoom-in 발생 — 18px 로 봉쇄 */
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
/* 모바일 터치 타깃 — 44px 이상 보장 */
@media (max-width: 768px) {
button,
a.btn, a.te-btn-primary, a.cv-btn, a.tl-card-btn, a.reg-btn, a.join-btn,
.te-btn-primary, .cv-btn, .reg-btn, .join-btn, .tl-card-btn {
min-height: 48px;
}
/* 폼 입력란 — 모바일에서 살짝 더 큰 패딩 */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], select, textarea {
padding: 14px 16px;
min-height: 48px;
}
}
/* ── /member/join 전용 폰트 보정 (18px 통일) ───────────── */
.join-greeting p,
.join-ai-body p,
.join-ai-bullets li,
.join-ai-quote,
.join-ai-lead,
.join-ai-cta,
.join-priv-row p,
.join-priv-row strong,
.join-priv-question,
.join-priv-mark,
.join-fee-label,
.join-fee-value,
.join-label {
font-size: 18px !important;
}
.join-card-title { font-size: 24px !important; }
.join-fee-value strong { font-size: 28px !important; } /* 강조 금액 */
.join-fee-value small { font-size: 16px !important; }
.join-fee-tbd { font-size: 16px !important; }
.join-greeting-emph { font-size: 19px !important; }
.join-input { font-size: 18px !important; padding: 14px 18px; }
.join-btn { font-size: 18px !important; padding: 16px 48px; }
/* ── 신청 폼(/member/register) 도 동일 보정 ─────────────── */
.reg-input { font-size: 18px !important; padding: 14px 18px; }
.reg-label { font-size: 18px !important; }
.reg-btn { font-size: 18px !important; }
.reg-notice ul { font-size: 17px !important; }
/* ── 모바일 상세 (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {
body { font-size: 17px; line-height: 1.65; }
.site-main p,
.site-main li,
.site-main td,
.site-main th,
.site-main label { font-size: 17px; }
/* /member/join — 모바일에서도 가독성 유지 */
.join-section { padding: 30px 0 60px; }
.join-card { padding: 22px 18px; border-radius: 12px; margin-bottom: 18px; }
.join-title { font-size: 24px; line-height: 1.35; }
.join-subtitle { font-size: 15px; }
.join-card-title { font-size: 19px !important; padding-bottom: 10px; margin-bottom: 14px; }
.join-greeting p,
.join-ai-body p,
.join-ai-bullets li,
.join-ai-lead,
.join-priv-row p,
.join-priv-question,
.join-priv-mark,
.join-fee-label,
.join-fee-value,
.join-label,
.join-input { font-size: 17px !important; }
.join-card-title { font-size: 19px !important; }
.join-fee-value strong { font-size: 24px !important; }
.join-fee-row { flex-direction: column; align-items: flex-start; gap: 4px; }
.join-priv-agree { padding: 14px 16px; gap: 10px; }
.join-priv-mark { padding: 8px 16px; font-size: 16px !important; }
.join-grid { gap: 14px; }
.join-input { padding: 13px 14px; min-height: 48px; }
.join-actions { gap: 10px; margin-top: 24px; }
.join-btn { padding: 15px; font-size: 17px !important; }
/* /member/register 모바일 */
.reg-form { padding: 22px 16px; }
.reg-title { font-size: 22px; }
.reg-input { padding: 13px 14px; min-height: 48px; font-size: 17px !important; }
.reg-label { font-size: 17px !important; }
.reg-notice ul { font-size: 15px !important; }
.reg-btn { font-size: 17px !important; padding: 14px; }
}
/* ── 작은 모바일 (≤ 480px, 갤럭시 S 시리즈, iPhone SE) ── */
@media (max-width: 480px) {
.container { padding: 0 16px; }
.join-section { padding: 20px 0 50px; }
.join-card { padding: 18px 14px; }
.join-title { font-size: 21px; }
.join-card-title { font-size: 17px !important; }
.join-ai-quote { padding: 14px 16px; font-size: 16px !important; }
.join-priv-agree { flex-direction: column; align-items: stretch; }
.join-priv-radio { justify-content: center; }
.join-fee-value strong { font-size: 22px !important; }
}
/* ── iPhone 노치 영역 보호 (이미 _header에서 viewport-fit=cover 처리됨) ── */
@supports (padding: max(0px)) {
body {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
}
/* 한글 단어 단위 줄바꿈 (긴 한글 문장이 깔끔하게 끊김) */
.join-card,
.reg-form,
.site-main p,
.site-main li {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* ============================================================
2026 의무연수 안내 섹션 (.notice-section)
배경 + 애니메이션 SVG + 강조 기간 카드
============================================================ */
.notice-section {
position: relative;
padding: 80px 0;
overflow: hidden;
isolation: isolate;
background: #f8fafc;
}
.ns-bg {
position: absolute; inset: 0;
background-image: url("/asset/img/section2_bg.jpg");
background-position: center right;
background-size: cover;
background-repeat: no-repeat;
z-index: -2;
}
.ns-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right,
rgba(248,250,252,0.97) 0%,
rgba(248,250,252,0.95) 45%,
rgba(248,250,252,0.78) 65%,
rgba(248,250,252,0.20) 100%);
z-index: -1;
}
.ns-deco {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.55;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}
.ns-deco-pencil {
width: 70px; height: 70px;
top: 8%; right: 38%;
animation: nsFloat 4.5s ease-in-out infinite, nsSpin 18s linear infinite;
}
.ns-deco-book {
width: 90px; height: 70px;
bottom: 12%; left: 48%;
animation: nsFloat 5.2s ease-in-out infinite reverse;
}
.ns-deco-cap {
width: 80px; height: 70px;
top: 18%; right: 6%;
animation: nsFloat 4s ease-in-out infinite;
}
.ns-deco-star {
width: 32px; height: 32px;
top: 22%; right: 50%;
animation: nsTwinkle 2.5s ease-in-out infinite;
}
.ns-deco-star2 {
top: auto; right: 58%; bottom: 26%;
width: 24px; height: 24px;
animation-delay: 1.2s;
animation-duration: 3.2s;
}
@keyframes nsFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-18px); }
}
@keyframes nsSpin {
0% { transform: rotate(-5deg); }
100% { transform: rotate(355deg); }
}
@keyframes nsTwinkle {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.25) rotate(20deg); }
}
.ns-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 40px;
position: relative;
z-index: 1;
}
.ns-content { position: relative; }
.ns-tag {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
background: #1e3a8a; color: #fff;
font-size: 13px; font-weight: 700; letter-spacing: 0.2em;
border-radius: 999px;
margin-bottom: 18px;
}
.ns-title {
font-size: 38px; font-weight: 800;
color: #0f172a;
line-height: 1.3;
letter-spacing: -0.02em;
margin: 0 0 24px;
}
.ns-title-em {
background: linear-gradient(180deg, transparent 65%, #fde68a 65%);
padding: 0 6px;
color: #1e3a8a;
}
.ns-msg {
margin: 0 0 28px;
padding: 0;
list-style: none;
counter-reset: nsmsg;
}
.ns-msg li {
position: relative;
padding: 12px 0 12px 44px;
font-size: 17px;
line-height: 1.85;
color: #334155;
border-bottom: 1px dashed rgba(15,23,42,0.10);
counter-increment: nsmsg;
}
.ns-msg li:last-child { border-bottom: 0; }
.ns-msg li::before {
content: counter(nsmsg);
position: absolute;
left: 0; top: 14px;
width: 30px; height: 30px;
background: #1e3a8a; color: #fff;
font-size: 14px; font-weight: 800;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.ns-msg strong { color: #1e3a8a; }
/* 줄바꿈: PC 에서는 줄을 띄우고, 모바일에서는 자연스러운 흐름 유지 */
.ns-pc-br { display: none; }
@media (min-width: 992px) {
.ns-pc-br { display: inline; }
}
.ns-highlight {
background: #fef08a;
padding: 2px 6px;
border-radius: 4px;
color: #b45309 !important;
font-weight: 800 !important;
}
.ns-curriculum {
margin-top: 28px;
padding: 24px 26px;
background: rgba(255,255,255,0.85);
border-left: 5px solid #1e3a8a;
border-radius: 0 12px 12px 0;
backdrop-filter: blur(2px);
}
.ns-sub-title {
font-size: 20px; font-weight: 800;
color: #1e3a8a;
margin: 0 0 14px;
display: flex; align-items: center; gap: 8px;
}
.ns-sub-icon { font-size: 22px; }
.ns-classes { list-style: none; padding: 0; margin: 0; }
.ns-classes li {
display: flex; align-items: center; gap: 14px;
padding: 10px 0;
border-bottom: 1px solid rgba(15,23,42,0.08);
transition: transform .2s, padding-left .2s;
}
.ns-classes li:last-child { border-bottom: 0; }
.ns-classes li:hover {
transform: translateX(4px);
padding-left: 4px;
}
.nc-no {
flex-shrink: 0;
width: 60px;
padding: 6px 8px;
font-size: 13px; font-weight: 800;
background: #1e3a8a; color: #fff;
border-radius: 6px;
text-align: center;
white-space: nowrap;
letter-spacing: -0.04em;
line-height: 1.2;
}
.nc-name { font-size: 17px; color: #1e293b; font-weight: 600; }
.ns-cert-note {
margin: 16px 0 0;
padding: 12px 16px;
background: #fef3c7;
border-radius: 8px;
font-size: 15px;
color: #78350f;
line-height: 1.7;
}
.ns-cert-note strong { color: #b45309; }
.ns-side { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.ns-period-card {
position: relative;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #1e40af 100%);
border-radius: 20px;
padding: 32px 28px;
color: #fff;
box-shadow: 0 18px 50px rgba(30,58,138,0.40);
overflow: hidden;
isolation: isolate;
}
.ns-period-deco {
position: absolute; top: -40px; right: -40px;
width: 200px; height: 200px;
z-index: -1;
animation: nsSpinSlow 30s linear infinite;
}
.ns-period-deco svg { width: 100%; height: 100%; }
@keyframes nsSpinSlow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ns-period-icon {
width: 70px; height: 70px;
margin-bottom: 14px;
animation: nsBounce 2.6s ease-in-out infinite;
}
.ns-period-icon svg { width: 100%; height: 100%; }
@keyframes nsBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.ns-period-label {
font-size: 15px; font-weight: 700;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.82);
margin-bottom: 12px;
}
.ns-period-main {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px;
padding: 18px;
margin-bottom: 18px;
}
.ns-period-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ns-period-row + .ns-period-row {
border-top: 1px dashed rgba(255,255,255,0.25);
}
.ns-period-tag {
flex-shrink: 0;
padding: 6px 12px;
font-size: 13px; font-weight: 800;
background: #fbbf24; color: #78350f;
border-radius: 6px;
letter-spacing: 0.05em;
}
.ns-tag-extra { background: #f97316; color: #fff; }
.ns-period-date {
font-size: 18px; font-weight: 700;
color: #fff;
}
.ns-deadline {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
background: rgba(220,38,38,0.20);
border: 2px solid #fca5a5;
border-radius: 10px;
font-size: 17px; font-weight: 800;
color: #fff;
margin-bottom: 18px;
}
.ns-deadline-blink {
color: #fca5a5;
font-size: 18px;
animation: nsBlink 1.2s infinite;
}
@keyframes nsBlink {
0%, 100% { opacity: 0.4; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.15); }
}
.ns-cta-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%;
padding: 16px 22px;
background: #fbbf24; color: #1e3a8a;
font-size: 18px; font-weight: 800;
border-radius: 12px;
text-decoration: none;
transition: transform .2s, box-shadow .2s, background .2s;
box-shadow: 0 6px 18px rgba(251,191,36,0.40);
}
.ns-cta-btn:hover {
transform: translateY(-2px);
background: #f59e0b;
color: #fff;
box-shadow: 0 12px 28px rgba(251,191,36,0.55);
}
.ns-warning {
display: flex; gap: 14px;
padding: 18px 20px;
background: rgba(254,226,226,0.95);
border: 2px solid #fca5a5;
border-radius: 12px;
backdrop-filter: blur(2px);
}
.ns-warning svg { flex-shrink: 0; margin-top: 2px; }
.ns-warning strong {
display: block;
font-size: 16px;
color: #b91c1c;
margin-bottom: 4px;
}
.ns-warning span { display: block; font-size: 14px; color: #7f1d1d; }
.ns-warning em { font-style: normal; font-weight: 700; color: #b91c1c; }
@media (max-width: 992px) {
.notice-section { padding: 50px 0; }
.ns-bg { background-position: center top; }
.ns-overlay {
background: linear-gradient(180deg,
rgba(248,250,252,0.92) 0%,
rgba(248,250,252,0.96) 30%,
rgba(248,250,252,0.96) 100%);
}
.ns-grid { grid-template-columns: 1fr; gap: 28px; }
.ns-title { font-size: 28px; }
.ns-deco-pencil, .ns-deco-cap, .ns-deco-book, .ns-deco-star { display: none; }
}
@media (max-width: 480px) {
.notice-section { padding: 36px 0; }
.ns-title { font-size: 22px; }
.ns-msg li { font-size: 15px; padding-left: 38px; }
.ns-msg li::before { width: 26px; height: 26px; font-size: 13px; }
.ns-curriculum { padding: 18px 16px; }
.ns-sub-title { font-size: 17px; }
.nc-no { width: 52px; font-size: 12px; padding: 5px 6px; white-space: nowrap; letter-spacing: -0.05em; }
.nc-name { font-size: 15px; }
.ns-period-card { padding: 24px 20px; }
.ns-period-date { font-size: 16px; }
.ns-period-row { flex-direction: column; align-items: flex-start; gap: 6px; }
.ns-deadline { font-size: 15px; }
.ns-cta-btn { padding: 14px; font-size: 16px; }
/* 모바일: hover 효과 비활성 (tap 깜박임 방지) */
.ns-classes li:hover { transform: none; padding-left: 0; }
/* 모바일: backdrop-filter 끔 (성능) */
.ns-curriculum, .ns-warning { backdrop-filter: none; }
/* 카드 그림자 줄임 */
.ns-period-card { box-shadow: 0 8px 24px rgba(30,58,138,0.30); }
/* iPhone 노치 안전영역 — 좌우 패딩 보장 */
.notice-section .container {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
}
@media (prefers-reduced-motion: reduce) {
.ns-deco, .ns-period-icon, .ns-period-deco, .ns-deadline-blink {
animation: none !important;
}
}
/* ============================================================
★ AI 우선 추천 섹션 (.ai-section)
- 다크 우주 그라디언트 + 움직이는 SVG 별/라인
- 좌측 채팅 mock + 화살표 + 우측 메시지
- 하단 임팩트 CTA
============================================================ */
.ai-section {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, #0a0e27 0%, #1e1b4b 50%, #0f172a 100%);
color: #fff;
overflow: hidden;
isolation: isolate;
}
/* 움직이는 SVG 배경 */
.ai-bg {
position: absolute; inset: 0;
z-index: 0;
pointer-events: none;
}
.ai-bg-svg { width: 100%; height: 100%; display: block; }
.ai-bg-glow1 { animation: aiGlowMove 15s ease-in-out infinite; transform-origin: center; }
.ai-bg-glow2 { animation: aiGlowMove 15s ease-in-out infinite reverse; transform-origin: center; }
@keyframes aiGlowMove {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
50% { transform: translate(60px, -40px) scale(1.15); opacity: 1; }
}
/* 별 — 깜박임 (8가지 딜레이) */
.ai-star { animation: aiTwinkle 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.ai-star-d1 { animation-delay: 0.0s; }
.ai-star-d2 { animation-delay: 0.4s; }
.ai-star-d3 { animation-delay: 0.8s; }
.ai-star-d4 { animation-delay: 1.2s; }
.ai-star-d5 { animation-delay: 1.6s; }
.ai-star-d6 { animation-delay: 2.0s; }
.ai-star-d7 { animation-delay: 2.4s; }
.ai-star-d8 { animation-delay: 2.8s; }
@keyframes aiTwinkle {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.6); }
}
/* 데이터 흐름 라인 — 좌→우 */
.ai-line-flow {
stroke-dasharray: 240 1640;
animation: aiLineFlow 6s linear infinite;
}
.ai-line-d2 { animation-delay: 2s; animation-duration: 8s; }
@keyframes aiLineFlow {
0% { stroke-dashoffset: 1880; }
100% { stroke-dashoffset: 0; }
}
/* 그리드 패턴 */
.ai-bg-grid { animation: aiGridPulse 4s ease-in-out infinite; }
@keyframes aiGridPulse {
0%, 100% { opacity: 0.04; }
50% { opacity: 0.10; }
}
/* ── 헤드라인 ───────────────────────────── */
.ai-head {
text-align: center;
position: relative; z-index: 2;
margin-bottom: 60px;
}
.ai-head-tag {
display: inline-block;
padding: 8px 18px;
background: rgba(251,191,36,0.15);
border: 1px solid rgba(251,191,36,0.5);
color: #fbbf24;
font-size: 13px; font-weight: 700; letter-spacing: 0.25em;
border-radius: 999px;
margin-bottom: 24px;
animation: aiTagGlow 2.5s ease-in-out infinite;
}
@keyframes aiTagGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.4); }
50% { box-shadow: 0 0 40px 6px rgba(251,191,36,0.18); }
}
.ai-head-title {
font-size: 42px; font-weight: 900;
line-height: 1.4; letter-spacing: -0.02em;
color: #fff;
margin: 0 0 20px;
}
.ai-strike {
position: relative;
display: inline-block;
font-size: 1.35em; /* "이제 사람들은"보다 크게 */
color: #cbd5e1;
font-weight: 800;
letter-spacing: -0.03em;
vertical-align: middle;
}
.ai-strike::after {
content: '';
position: absolute;
left: -4%; right: -4%; top: 50%;
height: 4px;
background: #ef4444;
transform: rotate(-3deg);
transform-origin: center;
animation: aiStrike 2.5s ease-out 0.5s forwards;
width: 0;
border-radius: 2px;
box-shadow: 0 0 8px rgba(239,68,68,0.6);
}
@keyframes aiStrike {
0% { width: 0; }
100% { width: 108%; }
}
.ai-em {
display: inline-block;
font-size: 1.7em; /* "이제 사람들은"보다 훨씬 크게 */
font-weight: 900;
letter-spacing: -0.04em;
vertical-align: middle;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: aiEmShimmer 3s ease-in-out infinite;
}
@keyframes aiEmShimmer {
0%, 100% { filter: drop-shadow(0 0 12px rgba(251,191,36,0.6)); }
50% { filter: drop-shadow(0 0 24px rgba(251,191,36,1)); }
}
.ai-head-sub {
font-size: 22px; font-weight: 700;
color: #fde68a;
margin: 22px 0 0;
}
.ai-head-sub strong {
background: linear-gradient(180deg, transparent 60%, rgba(251,191,36,0.35) 60%);
padding: 0 4px;
}
/* ── 비교 그리드 (채팅 / 화살표 / 메시지) ────────── */
.ai-compare {
display: grid;
grid-template-columns: 1fr 60px 1fr;
gap: 30px;
align-items: center;
position: relative; z-index: 2;
margin-bottom: 80px;
}
/* 채팅 mock */
.ai-chat {
background: rgba(15,23,42,0.85);
border: 1px solid rgba(96,165,250,0.25);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.5),
0 0 0 1px rgba(251,191,36,0.06) inset;
backdrop-filter: blur(8px);
animation: aiChatFloat 5s ease-in-out infinite;
}
@keyframes aiChatFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.ai-chat-bar {
display: flex; align-items: center; gap: 16px;
padding: 14px 18px;
background: rgba(0,0,0,0.4);
border-bottom: 1px solid rgba(96,165,250,0.18);
}
.ai-chat-dots { display: inline-flex; gap: 6px; }
.ai-chat-dots i {
display: block; width: 12px; height: 12px;
border-radius: 50%;
}
.ai-chat-dots i:nth-child(1) { background: #ef4444; }
.ai-chat-dots i:nth-child(2) { background: #f59e0b; }
.ai-chat-dots i:nth-child(3) { background: #10b981; }
.ai-chat-brand {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 700; color: #fbbf24;
letter-spacing: 0.02em;
}
.ai-chat-body {
padding: 26px 24px;
display: flex; flex-direction: column; gap: 22px;
}
.ai-msg { display: flex; align-items: flex-start; gap: 12px; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bot { justify-content: flex-start; }
.ai-msg-avatar {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.ai-avatar-bot { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.ai-msg-bubble {
padding: 14px 18px;
border-radius: 16px;
font-size: 17px; line-height: 1.6;
max-width: 80%;
box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.ai-msg-user .ai-msg-bubble {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #fff;
border-bottom-right-radius: 4px;
}
.ai-msg-user .ai-msg-bubble strong { color: #fef3c7; font-weight: 800; }
.ai-bubble-bot {
background: #fff;
color: #0f172a;
border-bottom-left-radius: 4px;
font-weight: 500;
}
.ai-bubble-em {
display: inline-block;
color: #1e3a8a !important;
background: #fef3c7;
padding: 2px 8px;
border-radius: 4px;
margin: 4px 0;
}
.ai-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 14px;
}
.ai-tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 12px;
background: #ecfeff;
border: 1px solid #67e8f9;
border-radius: 999px;
font-size: 13px; font-weight: 700;
color: #0e7490;
}
.ai-tag-ico { font-size: 13px; }
.ai-tag-cert {
background: #fef3c7;
border-color: #fbbf24;
color: #92400e;
}
/* 화살표 ››› */
.ai-arrow {
display: flex; align-items: center; justify-content: center;
font-size: 56px; font-weight: 900;
color: #fbbf24;
letter-spacing: 0.05em;
text-shadow: 0 0 20px rgba(251,191,36,0.6);
}
.ai-arrow-ch { animation: aiArrowFlow 1.6s ease-in-out infinite; }
.ai-arrow-d2 { animation-delay: 0.2s; }
.ai-arrow-d3 { animation-delay: 0.4s; }
@keyframes aiArrowFlow {
0%, 100% { opacity: 0.4; transform: translateX(0); }
50% { opacity: 1; transform: translateX(8px); }
}
/* 우측 메시지 */
.ai-message {
position: relative;
padding: 40px 36px;
background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(245,158,11,0.04) 100%);
border: 2px solid rgba(251,191,36,0.35);
border-radius: 18px;
animation: aiMessagePulse 3s ease-in-out infinite;
}
@keyframes aiMessagePulse {
0%, 100% { border-color: rgba(251,191,36,0.35); }
50% { border-color: rgba(251,191,36,0.8); box-shadow: 0 0 40px rgba(251,191,36,0.25); }
}
/* 6줄 레이아웃 — 한 줄씩 큰 글씨로 */
.ai-message-text {
font-size: 30px; line-height: 1.55;
font-weight: 700; color: #fde68a;
margin: 0;
text-align: center;
letter-spacing: -0.02em;
}
.aim-line {
display: block;
padding: 5px 0;
}
.aim-line:not(:last-child) {
border-bottom: 1px dashed rgba(251,191,36,0.18);
}
.aim-last {
font-size: 1.15em;
font-weight: 900;
color: #fbbf24;
margin-top: 6px;
}
.ai-em-y {
color: #fbbf24;
font-weight: 900;
font-size: 1.08em;
text-shadow: 0 0 20px rgba(251,191,36,0.4);
}
.ai-message-mark {
display: inline-block;
background: rgba(252,211,77,0.25);
border: 2px solid #fcd34d;
padding: 2px 14px;
border-radius: 6px;
color: #fff;
font-weight: 900;
font-size: 1.1em;
margin: 0 4px;
}
/* ── 하단 임팩트 ────────────────────────── */
.ai-impact {
position: relative; z-index: 2;
text-align: center;
padding: 50px 30px;
background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(139,92,246,0.10));
border: 1px solid rgba(167,139,250,0.30);
border-radius: 20px;
overflow: hidden;
isolation: isolate;
}
.ai-impact-glow {
position: absolute; inset: -50%;
background: radial-gradient(circle at center, rgba(251,191,36,0.18), transparent 60%);
z-index: -1;
animation: aiImpactGlow 4s ease-in-out infinite;
}
@keyframes aiImpactGlow {
0%, 100% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.2) translate(20px, -10px); }
}
.ai-impact-icon {
display: inline-block;
width: 64px; height: 64px;
margin-bottom: 18px;
animation: aiImpactSpin 6s linear infinite, aiImpactFloat 2s ease-in-out infinite;
}
.ai-impact-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 0 16px rgba(251,191,36,0.6)); }
@keyframes aiImpactSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes aiImpactFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
.ai-impact-text {
font-size: 32px; font-weight: 800;
color: #fff;
line-height: 1.4;
margin: 0 0 26px;
letter-spacing: -0.02em;
}
.ai-impact-em {
display: inline-block;
font-size: 1.45em; /* 옆 글자보다 훨씬 크게 */
font-weight: 900;
letter-spacing: -0.03em;
vertical-align: middle;
background: linear-gradient(135deg, #fbbf24, #f59e0b 50%, #fde68a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(251,191,36,0.3);
filter: drop-shadow(0 2px 8px rgba(251,191,36,0.4));
}
.ai-impact-strong {
display: inline-block;
font-size: 1.1em;
background: linear-gradient(135deg, #fbbf24 0%, #fde68a 50%, #fbbf24 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: aiShimmer 2s linear infinite;
}
@keyframes aiShimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.ai-impact-cta {
display: inline-flex; align-items: center; gap: 12px;
padding: 20px 40px; /* 20% 확대 */
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #0a0e27;
font-size: 22px; /* 20% 확대 (18 → 22) */
font-weight: 800;
border-radius: 14px;
border: 2px solid transparent;
text-decoration: none;
transition: background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s;
box-shadow: 0 10px 30px rgba(251,191,36,0.40);
}
.ai-impact-cta svg {
width: 26px; height: 26px; /* 아이콘도 20% 확대 (22 → 26) */
}
.ai-impact-cta:hover {
/* 흰 배경 + 검정 글씨 */
background: #ffffff;
color: #000000;
border-color: #1e3a8a;
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(255,255,255,0.4),
0 0 0 4px rgba(251,191,36,0.25);
}
/* ── 모바일 반응형 ───────────────────────── */
@media (max-width: 992px) {
.ai-section { padding: 60px 0; }
.ai-head-title { font-size: 30px; line-height: 1.45; }
.ai-strike { font-size: 1.25em; }
.ai-em { font-size: 1.55em; }
.ai-head-sub { font-size: 17px; }
.ai-compare {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 50px;
}
.ai-arrow {
transform: rotate(90deg);
font-size: 40px;
margin: 8px 0;
}
.ai-message { padding: 32px 24px; }
.ai-message-text { font-size: 24px; line-height: 1.5; }
.aim-last { font-size: 1.18em; }
.ai-impact { padding: 40px 20px; }
.ai-impact-text { font-size: 24px; }
.ai-impact-em { font-size: 1.4em; }
.ai-impact-cta { padding: 17px 30px; font-size: 19px; gap: 10px; }
.ai-impact-cta svg { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
.ai-section { padding: 44px 0; }
.ai-head { margin-bottom: 36px; }
.ai-head-tag { font-size: 11px; padding: 6px 14px; letter-spacing: 0.18em; }
.ai-head-title { font-size: 22px; line-height: 1.5; }
.ai-strike { font-size: 1.18em; }
.ai-em { font-size: 1.5em; }
.ai-head-sub { font-size: 15px; }
.ai-msg-bubble { font-size: 15px; padding: 12px 14px; max-width: 88%; }
.ai-msg-avatar { width: 32px; height: 32px; font-size: 16px; }
.ai-tag { font-size: 11px; padding: 5px 9px; }
.ai-message { padding: 24px 18px; }
.ai-message-text { font-size: 19px; line-height: 1.55; }
.aim-line { padding: 4px 0; }
.aim-last { font-size: 1.15em; }
.ai-message-mark { padding: 1px 8px; font-size: 1.05em; }
.ai-impact { padding: 30px 18px; }
.ai-impact-icon { width: 50px; height: 50px; }
.ai-impact-text { font-size: 19px; }
.ai-impact-em { font-size: 1.35em; }
.ai-impact-cta { padding: 16px 26px; font-size: 18px; gap: 8px; }
.ai-impact-cta svg { width: 20px; height: 20px; }
/* 모바일: 별 절반만 보이기 (성능) */
.ai-bg-stars circle:nth-child(2n) { display: none; }
/* backdrop-filter OFF */
.ai-chat { backdrop-filter: none; }
}
/* 접근성: 모션 줄임 */
@media (prefers-reduced-motion: reduce) {
.ai-bg-glow1, .ai-bg-glow2, .ai-star, .ai-line-flow,
.ai-bg-grid, .ai-head-tag, .ai-em, .ai-strike::after,
.ai-chat, .ai-arrow-ch, .ai-message, .ai-impact-glow,
.ai-impact-icon, .ai-impact-strong {
animation: none !important;
}
.ai-strike::after { width: 108%; }
}
/* ★★ 글로벌 .site-main span/p 규칙 우선순위 무력화 — AI 섹션 폰트 강제 ★★ */
.ai-section .ai-head-title { font-size: 42px !important; line-height: 1.4 !important; }
.ai-section .ai-strike { font-size: 1.35em !important; }
.ai-section .ai-em { font-size: 1.7em !important; }
.ai-section .ai-head-sub { font-size: 22px !important; }
.ai-section .ai-message-text { font-size: 28px !important; line-height: 1.55 !important; }
.ai-section .ai-em-y { font-size: 1.06em !important; }
.ai-section .ai-message-mark { font-size: 1.1em !important; }
.ai-section .aim-last { font-size: 1.2em !important; }
.ai-section .ai-impact-text { font-size: 32px !important; }
.ai-section .ai-impact-em { font-size: 1.45em !important; }
.ai-section .ai-impact-strong { font-size: 1.1em !important; }
.ai-section .ai-msg-bubble { font-size: 17px !important; }
.ai-section .ai-tag { font-size: 13px !important; }
.ai-section .aim-line { font-size: inherit !important; }
/* AI 4종 한 줄에 들어가도록 첫 줄만 살짝 작게 + 자간 압축 */
.ai-section .ai-message-text .aim-line:first-child {
font-size: 0.82em !important;
letter-spacing: -0.04em !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 992px) {
.ai-section .ai-head-title { font-size: 30px !important; line-height: 1.45 !important; }
.ai-section .ai-strike { font-size: 1.25em !important; }
.ai-section .ai-em { font-size: 1.55em !important; }
.ai-section .ai-head-sub { font-size: 17px !important; }
.ai-section .ai-message-text { font-size: 23px !important; line-height: 1.5 !important; }
.ai-section .aim-last { font-size: 1.2em !important; }
.ai-section .ai-message-text .aim-line:first-child {
font-size: 0.78em !important;
letter-spacing: -0.04em !important;
white-space: normal; /* 모바일은 자연스럽게 wrap */
}
.ai-section .ai-impact-text { font-size: 24px !important; }
.ai-section .ai-impact-em { font-size: 1.4em !important; }
}
@media (max-width: 480px) {
.ai-section .ai-head-title { font-size: 22px !important; line-height: 1.5 !important; }
.ai-section .ai-strike { font-size: 1.18em !important; }
.ai-section .ai-em { font-size: 1.5em !important; }
.ai-section .ai-head-sub { font-size: 15px !important; }
.ai-section .ai-message-text { font-size: 18px !important; line-height: 1.55 !important; }
.ai-section .aim-last { font-size: 1.18em !important; }
.ai-section .ai-message-text .aim-line:first-child {
font-size: 0.85em !important;
letter-spacing: -0.04em !important;
line-height: 1.45 !important;
}
.ai-section .ai-impact-text { font-size: 19px !important; }
.ai-section .ai-impact-em { font-size: 1.35em !important; }
.ai-section .ai-msg-bubble { font-size: 15px !important; }
.ai-section .ai-tag { font-size: 11px !important; }
}
/* ============================================================
주요 사업 (.biz-section) — 4 색상별 카드 + SVG 아이콘
============================================================ */
.biz-section {
padding: 100px 0;
background: #f8fafc;
position: relative;
overflow: hidden;
}
.biz-section::before {
content: '';
position: absolute;
top: -200px; left: -200px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(30,58,138,0.08), transparent);
z-index: 0;
}
.biz-section::after {
content: '';
position: absolute;
bottom: -200px; right: -200px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(251,191,36,0.10), transparent);
z-index: 0;
}
.biz-head {
text-align: center;
margin-bottom: 60px;
position: relative; z-index: 1;
}
.biz-tag {
display: inline-block;
padding: 8px 18px;
background: #1e3a8a; color: #fff;
font-size: 13px; font-weight: 700; letter-spacing: 0.25em;
border-radius: 999px;
margin-bottom: 18px;
}
.biz-section-title {
font-size: 38px; font-weight: 900;
color: #0f172a;
margin: 0 0 12px;
letter-spacing: -0.02em;
}
.biz-em {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.biz-section-sub {
font-size: 18px; color: #64748b;
margin: 0;
}
/* 카드 그리드 */
.biz-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
position: relative; z-index: 1;
}
/* 공통 카드 스타일 */
.biz-grid .biz-card {
position: relative;
display: block;
padding: 36px 28px 32px;
border-radius: 20px;
text-decoration: none;
color: #fff;
overflow: hidden;
isolation: isolate;
min-height: 320px;
transition: transform .35s cubic-bezier(.4,.0,.2,1), box-shadow .35s;
cursor: pointer;
}
.biz-grid .biz-card:hover {
transform: translateY(-12px) scale(1.02);
}
.biz-card-num {
font-size: 14px; font-weight: 900;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.6);
margin-bottom: 18px;
}
.biz-card-icon {
width: 80px; height: 80px;
margin-bottom: 22px;
}
.biz-card-icon svg { width: 100%; height: 100%; }
.biz-card-title {
font-size: 22px; font-weight: 900;
color: #fff;
margin: 0 0 14px;
line-height: 1.3;
letter-spacing: -0.04em;
white-space: nowrap; /* 한 줄 강제 */
overflow: hidden;
text-overflow: ellipsis;
}
/* 04 카드는 글자가 가장 길어서 살짝 작게 */
.biz-c04 .biz-card-title { font-size: 20px; }
.biz-card-desc {
font-size: 15px;
line-height: 1.65;
color: rgba(255,255,255,0.92);
margin: 0 0 24px;
}
.biz-card-desc strong { color: #fde68a; font-weight: 800; }
.biz-card-cta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 700;
color: rgba(255,255,255,0.95);
border-bottom: 1px solid rgba(255,255,255,0.5);
padding-bottom: 4px;
transition: gap .25s, border-color .25s;
}
.biz-card-cta span {
transition: transform .3s;
}
.biz-grid .biz-card:hover .biz-card-cta {
gap: 12px;
border-color: #fff;
}
.biz-grid .biz-card:hover .biz-card-cta span {
transform: translateX(4px);
}
/* 호버 시 떠오르는 글로우 */
.biz-card-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 60%);
opacity: 0;
transition: opacity .35s;
z-index: -1;
}
.biz-grid .biz-card:hover .biz-card-glow { opacity: 1; }
/* NEW 배지 */
.biz-card-badge {
position: absolute;
top: 18px; right: 18px;
padding: 4px 10px;
background: #ef4444;
color: #fff;
font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
border-radius: 999px;
animation: bizBadgePulse 1.6s ease-in-out infinite;
}
@keyframes bizBadgePulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}
/* 색상: 짙은 남색 → 하늘색 4단계 점진 그라디언트 (통일감) */
/* 01: 가장 짙은 남색 (Deep Navy) */
.biz-c01 {
background: linear-gradient(135deg, #0a1d52 0%, #1e3a8a 100%);
box-shadow: 0 12px 32px rgba(10,29,82,0.35);
}
.biz-c01:hover { box-shadow: 0 24px 60px rgba(10,29,82,0.55); }
/* 02: 진한 로얄 블루 (Royal Blue) */
.biz-c02 {
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
box-shadow: 0 12px 32px rgba(30,58,138,0.32);
}
.biz-c02:hover { box-shadow: 0 24px 60px rgba(30,58,138,0.50); }
/* 03: 밝은 블루 (Bright Blue) */
.biz-c03 {
background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
box-shadow: 0 12px 32px rgba(37,99,235,0.32);
}
.biz-c03:hover { box-shadow: 0 24px 60px rgba(37,99,235,0.50); }
/* 04: 하늘색 (Sky Blue) — AI 카드, 가장 밝음 */
.biz-c04 {
background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
box-shadow: 0 12px 32px rgba(14,165,233,0.35);
}
.biz-c04:hover { box-shadow: 0 24px 60px rgba(14,165,233,0.55); }
/* SVG 아이콘 애니메이션 */
.biz-play { animation: bizPlay 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bizPlay {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
.biz-pulse { animation: bizDotPulse 1.4s ease-in-out infinite; }
@keyframes bizDotPulse {
0%, 100% { opacity: 0.5; r: 2.5; }
50% { opacity: 1; r: 4.5; }
}
.biz-check {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: bizCheckDraw 2.5s ease-in-out infinite;
}
@keyframes bizCheckDraw {
0%, 30% { stroke-dashoffset: 40; }
60%, 100% { stroke-dashoffset: 0; }
}
.biz-spin {
transform-origin: 40px 40px;
animation: bizSpin 12s linear infinite;
}
@keyframes bizSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.biz-orbit {
transform-origin: 40px 40px;
animation: bizSpin 8s linear infinite;
}
.biz-twinkle {
transform-origin: 64px 20px;
animation: bizTwinkleBig 2s ease-in-out infinite;
}
@keyframes bizTwinkleBig {
0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.6; }
50% { transform: scale(1.3) rotate(20deg); opacity: 1; }
}
/* 카드 hover 시 아이콘 부드럽게 흔들림 */
.biz-grid .biz-card:hover .biz-card-icon {
animation: bizIconWobble 0.6s ease-in-out;
}
@keyframes bizIconWobble {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg) scale(1.08); }
75% { transform: rotate(5deg) scale(1.08); }
}
/* ── 반응형 ────────────────────────────── */
@media (max-width: 1200px) {
.biz-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
.biz-section { padding: 60px 0; }
.biz-section-title { font-size: 28px; }
.biz-section-sub { font-size: 16px; }
}
@media (max-width: 600px) {
.biz-grid { grid-template-columns: 1fr; gap: 16px; }
.biz-grid .biz-card { padding: 28px 22px 24px; min-height: 280px; }
.biz-card-icon { width: 64px; height: 64px; margin-bottom: 18px; }
.biz-card-title { font-size: 22px; }
.biz-c04 .biz-card-title { font-size: 20px; }
.biz-card-desc { font-size: 14px; }
.biz-section::before, .biz-section::after { display: none; }
}
/* 접근성 — 모션 줄임 */
@media (prefers-reduced-motion: reduce) {
.biz-play, .biz-pulse, .biz-check, .biz-spin, .biz-orbit, .biz-twinkle,
.biz-card-badge {
animation: none !important;
}
.biz-grid .biz-card:hover { transform: none; }
}
/* ============================================================
최신 게시물 (.latest-section) — 공지사항 + 자료실 2단
============================================================ */
.latest-section {
padding: 80px 0 100px;
background: #fff;
}
.latest-head {
text-align: center;
margin-bottom: 50px;
}
.latest-tag {
display: inline-block;
padding: 6px 16px;
background: #f1f5f9;
color: #1e3a8a;
font-size: 13px; font-weight: 700; letter-spacing: 0.25em;
border-radius: 999px;
margin-bottom: 14px;
}
.latest-section-title {
font-size: 34px; font-weight: 900;
color: #0f172a;
margin: 0;
letter-spacing: -0.02em;
}
.latest-em {
background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 2단 그리드 */
.latest-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.latest-col {
background: #f8fafc;
border-radius: 16px;
padding: 28px 28px 24px;
border: 1px solid #e2e8f0;
transition: box-shadow .25s, transform .25s;
}
.latest-col:hover {
box-shadow: 0 12px 32px rgba(15,23,42,0.08);
transform: translateY(-3px);
}
.latest-col-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 2px solid #1e3a8a;
}
.latest-col-title {
display: flex; align-items: center; gap: 12px;
}
.latest-col-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.latest-col-icon svg { width: 22px; height: 22px; }
.latest-col-title h3 {
font-size: 22px; font-weight: 800;
color: #0f172a;
margin: 0;
letter-spacing: -0.02em;
}
.latest-more {
font-size: 14px; font-weight: 700;
color: #1e3a8a;
text-decoration: none;
padding: 6px 14px;
border: 1px solid #1e3a8a;
border-radius: 999px;
transition: background .2s, color .2s;
}
.latest-more:hover {
background: #1e3a8a;
color: #fff;
}
/* 리스트 */
.latest-list {
list-style: none;
padding: 0;
margin: 0;
}
.latest-list li + li {
border-top: 1px solid #e2e8f0;
}
.latest-item {
display: flex; align-items: center; gap: 14px;
padding: 14px 4px;
text-decoration: none;
color: #0f172a;
transition: padding-left .2s, background .2s;
border-radius: 6px;
min-width: 0; /* flex 자식 축소 허용 — 컨테이너 푸시 방지 */
}
.latest-item:hover {
padding-left: 8px;
color: #1e3a8a;
}
.latest-item-no {
flex-shrink: 0;
width: 30px;
font-size: 13px; font-weight: 800;
color: #94a3b8;
font-variant-numeric: tabular-nums;
}
.latest-item-title {
flex: 1;
min-width: 0; /* ★ 핵심 — 긴 한국어 제목이 부모 폭 침범 차단 */
font-size: 16px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
}
.latest-item-date {
flex-shrink: 0;
font-size: 13px;
color: #64748b;
font-weight: 500;
white-space: nowrap;
}
.latest-empty {
padding: 50px 0;
text-align: center;
color: #94a3b8;
font-size: 15px;
}
/* 컬럼 자체 overflow 안전망 */
.latest-col { min-width: 0; overflow: hidden; }
/* 반응형 */
@media (max-width: 992px) {
.latest-section { padding: 50px 0 70px; }
.latest-section-title { font-size: 26px; }
.latest-grid { grid-template-columns: 1fr; gap: 18px; }
.latest-col { padding: 22px 20px 18px; }
.latest-col-title h3 { font-size: 19px; }
}
/* ── 모바일 (≤768px) — 2행 레이아웃: [번호][제목] / [날짜] ── */
@media (max-width: 768px) {
.latest-item {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"num title"
". date";
column-gap: 10px;
row-gap: 4px;
padding: 12px 2px;
align-items: center;
}
.latest-item-no {
grid-area: num;
width: auto;
min-width: 22px;
font-weight: 500; /* 800 → 500 (보통)으로 두 자리 글자 줄바꿈 방지 */
letter-spacing: -0.02em; /* 자간 살짝 좁힘 */
white-space: nowrap; /* 절대 줄바꿈 금지 */
}
.latest-item-title { grid-area: title; font-size: 15px; line-height: 1.45; }
.latest-item-date { grid-area: date; font-size: 12px; color: #94a3b8; }
}
@media (max-width: 480px) {
.latest-section-title { font-size: 22px; }
.latest-tag { font-size: 11px; letter-spacing: 0.18em; padding: 5px 12px; }
.latest-col-icon { width: 32px; height: 32px; }
.latest-col-icon svg { width: 18px; height: 18px; }
.latest-col-title h3 { font-size: 17px; }
.latest-more { font-size: 12px; padding: 5px 10px; }
.latest-item-title { font-size: 14px; }
.latest-item-no {
width: auto;
min-width: 22px;
font-size: 11px;
font-weight: 500; /* 800 → 500 (보통) */
letter-spacing: -0.02em; /* 자간 좁힘 — "01" 한줄 보장 */
white-space: nowrap; /* 절대 줄바꿈 금지 */
}
.latest-item:hover { padding-left: 2px; } /* 모바일은 hover 효과 약화 */
}
@media (prefers-reduced-motion: reduce) {
.latest-col, .latest-item { transition: none; }
}
/* ============================================================
서브페이지 — 간결 브레드크럼 + 사이드바 + 콘텐츠 (SDF 스타일)
============================================================ */
/* 간결 브레드크럼 바 */
.sub-crumb-bar {
background: #fff;
border-bottom: 1px solid #e2e8f0;
}
.sub-crumb {
list-style: none;
margin: 0; padding: 0;
display: flex; align-items: stretch;
border-left: 1px solid #e2e8f0;
}
.sub-crumb > li { border-right: 1px solid #e2e8f0; }
.sub-crumb-home a {
display: flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
color: #475569;
text-decoration: none;
transition: background .2s, color .2s;
}
.sub-crumb-home a:hover { background: #f8fafc; color: #1e3a8a; }
.sub-crumb-item { position: relative; }
.sub-crumb-btn {
display: flex; align-items: center; gap: 14px;
height: 56px;
padding: 0 22px 0 24px;
min-width: 220px;
background: transparent;
border: 0;
font-size: 15px; font-weight: 600;
color: #1e3a8a;
cursor: pointer;
font-family: inherit;
transition: background .2s;
}
.sub-crumb-btn span { flex: 1; text-align: left; letter-spacing: -0.01em; }
.sub-crumb-btn svg {
flex-shrink: 0;
color: #94a3b8;
transition: transform .25s, color .2s;
}
.sub-crumb-item:hover .sub-crumb-btn,
.sub-crumb-item:focus-within .sub-crumb-btn {
background: #f8fafc;
}
.sub-crumb-item:hover .sub-crumb-btn svg,
.sub-crumb-item:focus-within .sub-crumb-btn svg {
color: #1e3a8a;
transform: rotate(180deg);
}
/* 드롭다운 */
.sub-crumb-dd {
position: absolute;
top: 100%; left: -1px; right: -1px;
list-style: none; padding: 6px 0; margin: 0;
background: #fff;
border: 1px solid #e2e8f0;
border-top: 0;
box-shadow: 0 12px 28px rgba(15,23,42,0.10);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .2s, transform .2s, visibility .2s;
z-index: 10;
}
.sub-crumb-item:hover .sub-crumb-dd,
.sub-crumb-item:focus-within .sub-crumb-dd {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sub-crumb-dd li a {
display: block;
padding: 10px 22px;
font-size: 14px; font-weight: 600;
color: #475569;
text-decoration: none;
transition: background .15s, color .15s, padding-left .15s;
}
.sub-crumb-dd li a:hover {
background: #f1f5f9;
color: #1e3a8a;
padding-left: 26px;
}
.sub-crumb-dd li.is-on a {
color: #1e3a8a;
font-weight: 800;
background: rgba(30,58,138,0.05);
}
.sub-crumb-dd li.is-on a::before {
content: '●';
color: #fbbf24;
margin-right: 8px;
font-size: 9px;
}
/* 본문 영역 */
.sub-section {
padding: 70px 0 100px;
background: #fff;
}
.sub-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 60px;
align-items: flex-start;
}
/* 좌측 사이드바 */
.sub-sidebar {
position: sticky;
top: 100px;
}
.sub-sidebar-head {
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 3px solid #1e3a8a;
}
.sub-sidebar-head .en {
display: block;
font-size: 12px; font-weight: 800; letter-spacing: 0.25em;
color: #2563eb;
margin-bottom: 8px;
}
.sub-sidebar-head h2 {
font-size: 26px; font-weight: 900;
color: #0f172a;
margin: 0;
letter-spacing: -0.02em;
}
.sub-sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sub-sidebar-nav li + li { border-top: 1px solid #e2e8f0; }
.sub-sidebar-nav a {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 4px;
font-size: 16px; font-weight: 600;
color: #475569;
text-decoration: none;
transition: padding-left .2s, color .2s;
}
.sub-sidebar-nav a svg {
opacity: 0;
transform: translateX(-4px);
transition: opacity .2s, transform .2s;
}
.sub-sidebar-nav a:hover {
padding-left: 8px;
color: #1e3a8a;
}
.sub-sidebar-nav a:hover svg { opacity: 0.6; transform: translateX(0); }
.sub-sidebar-nav li.is-active a {
color: #1e3a8a;
font-weight: 800;
padding-left: 8px;
}
.sub-sidebar-nav li.is-active a svg { opacity: 1; transform: translateX(0); color: #fbbf24; }
/* 우측 콘텐츠 */
.sub-content { min-width: 0; }
.sub-content-head { margin-bottom: 50px; }
.sub-content-en {
display: block;
font-size: 13px; font-weight: 800; letter-spacing: 0.3em;
color: #2563eb;
margin-bottom: 14px;
}
.sub-content-title {
font-size: 38px; font-weight: 900;
line-height: 1.35;
letter-spacing: -0.02em;
color: #0f172a;
margin: 0;
}
.sub-em {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 인사말 본문 */
.greet-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 50px;
align-items: flex-start;
}
.greet-text { font-size: 17px; line-height: 1.95; color: #334155; }
.greet-text p { margin: 0 0 18px; }
.greet-text strong { color: #1e3a8a; font-weight: 700; }
.greet-lead {
font-size: 22px !important; font-weight: 700;
color: #0f172a !important;
margin-bottom: 26px !important;
line-height: 1.6;
}
.greet-quote {
margin: 30px 0 !important;
padding: 24px 28px;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-left: 5px solid #0ea5e9;
border-radius: 0 12px 12px 0;
font-size: 19px !important;
font-weight: 700;
font-style: italic;
color: #0c4a6e !important;
line-height: 1.7;
}
/* 서명 블록 */
.greet-sign {
margin-top: 40px;
padding: 28px 32px;
background: #f8fafc;
border-radius: 14px;
border: 1px solid #e2e8f0;
}
.greet-sign-title {
font-size: 17px; font-weight: 800;
color: #1e3a8a;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #1e3a8a;
}
.greet-sign-row {
display: flex; gap: 36px; flex-wrap: wrap;
}
.greet-sign-item {
display: flex; align-items: baseline; gap: 12px;
}
.greet-sign-label {
font-size: 14px; font-weight: 700;
color: #64748b;
letter-spacing: 0.05em;
padding: 4px 10px;
background: #fff;
border-radius: 4px;
}
.greet-sign-name {
font-size: 22px; font-weight: 900;
color: #0f172a;
letter-spacing: 0.2em;
}
/* 우측 비주얼 */
.greet-visual {
position: sticky;
top: 100px;
}
.greet-photo {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(15,23,42,0.10);
margin-bottom: 24px;
}
.greet-photo-frame {
position: relative;
aspect-ratio: 4 / 5;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #0ea5e9 100%);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.greet-photo-bg {
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 50%),
radial-gradient(circle at 70% 70%, rgba(251,191,36,0.10), transparent 50%);
}
.greet-photo-icon {
position: relative;
width: 50%;
filter: drop-shadow(0 6px 16px rgba(0,0,0,0.2));
}
.greet-photo-icon svg { width: 100%; }
.greet-photo-cap {
padding: 22px 24px;
text-align: center;
}
.greet-photo-name {
font-size: 22px; font-weight: 900;
color: #0f172a;
letter-spacing: 0.05em;
}
.greet-photo-role {
font-size: 14px;
color: #64748b;
margin-top: 6px;
}
/* 핵심 가치 리스트 */
.greet-values {
list-style: none;
padding: 0;
margin: 0;
}
.greet-values li {
display: flex; gap: 16px; align-items: flex-start;
padding: 18px 20px;
background: #f8fafc;
border-radius: 12px;
margin-bottom: 12px;
transition: background .2s, transform .2s;
}
.greet-values li:hover {
background: #eff6ff;
transform: translateX(4px);
}
.greet-values-num {
flex-shrink: 0;
width: 36px; height: 36px;
background: #1e3a8a; color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 900;
}
.greet-values-text {
font-size: 15px;
line-height: 1.55;
color: #475569;
}
.greet-values-text strong {
display: block;
color: #0f172a;
font-size: 16px;
font-weight: 800;
margin-bottom: 2px;
}
/* 하단 CTA */
.sub-cta-row {
display: flex; gap: 14px; flex-wrap: wrap;
margin-top: 50px;
padding-top: 36px;
border-top: 1px solid #e2e8f0;
}
.sub-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 32px;
font-size: 17px; font-weight: 700;
border-radius: 12px;
text-decoration: none;
transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.sub-cta-primary {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
color: #fff;
box-shadow: 0 8px 24px rgba(30,58,138,0.30);
}
.sub-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(30,58,138,0.45);
color: #fff;
}
.sub-cta-light {
background: #f1f5f9;
color: #1e3a8a;
}
.sub-cta-light:hover {
background: #1e3a8a;
color: #fff;
}
/* 반응형 */
@media (max-width: 992px) {
.sub-crumb-home a { width: 48px; height: 48px; }
.sub-crumb-btn { height: 48px; min-width: 0; padding: 0 14px; font-size: 14px; gap: 10px; }
.sub-section { padding: 40px 0 70px; }
.sub-layout { grid-template-columns: 1fr; gap: 36px; }
.sub-sidebar { position: static; }
.sub-sidebar-nav { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.sub-sidebar-nav li { border: 1px solid #e2e8f0; border-radius: 999px; flex: 0 0 auto; }
.sub-sidebar-nav li + li { border-top: 1px solid #e2e8f0; }
.sub-sidebar-nav a { padding: 8px 18px; }
.sub-sidebar-nav a svg { display: none; }
.sub-sidebar-nav li.is-active { background: #1e3a8a; border-color: #1e3a8a; }
.sub-sidebar-nav li.is-active a { color: #fff; padding-left: 18px; }
.sub-content-title { font-size: 26px; }
.greet-grid { grid-template-columns: 1fr; gap: 30px; }
.greet-visual { position: static; }
.greet-lead { font-size: 19px !important; }
.greet-text { font-size: 16px; }
}
@media (max-width: 480px) {
.sub-crumb-btn { padding: 0 10px; font-size: 13px; gap: 6px; }
.sub-crumb-btn span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-content-en { font-size: 11px; }
.sub-content-title { font-size: 22px; }
.greet-quote { padding: 18px 20px; font-size: 16px !important; }
.greet-sign { padding: 20px; }
.greet-sign-row { gap: 16px; }
.greet-sign-name { font-size: 18px; letter-spacing: 0.15em; }
.sub-cta { padding: 14px 22px; font-size: 15px; }
}
/* 접근성 */
@media (prefers-reduced-motion: reduce) {
.greet-values li { animation: none !important; transition: none !important; }
}
/* ============================================================
인사말 — 단일 컬럼 단아한 레이아웃 (.gr-*)
============================================================ */
.gr-section {
padding: 80px 0 100px;
background: #fff;
position: relative;
overflow: hidden;
}
.gr-section::before {
content: '';
position: absolute;
top: 0; right: -200px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(30,58,138,0.04), transparent 70%);
z-index: 0;
}
.gr-section::after {
content: '';
position: absolute;
bottom: 0; left: -200px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(251,191,36,0.05), transparent 70%);
z-index: 0;
}
.gr-section > .container { position: relative; z-index: 1; }
/* 큰 중앙 타이틀 */
.gr-title-block {
text-align: center;
margin-bottom: 80px;
}
.gr-title {
font-size: 44px; font-weight: 600;
letter-spacing: 0.4em;
margin: 0;
color: #0f172a;
text-indent: 0.4em;
}
.gr-divider {
display: flex; justify-content: center;
margin-top: 24px;
}
.gr-divider span {
width: 60px; height: 4px;
background: linear-gradient(90deg, #1e3a8a 0%, #fbbf24 100%);
border-radius: 2px;
}
/* 회장 블록 */
.gr-block {
margin-bottom: 80px;
position: relative;
}
/* 알약 태그 (MISSION ━━ DESIGN AGENCY 같은) — 중앙 정렬 */
.gr-block { text-align: center; } /* 알약·헤드라인 모두 중앙 */
.gr-pill {
display: inline-flex; align-items: center; gap: 14px;
padding: 12px 28px;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
border-radius: 999px;
color: #fff;
margin: 0 auto 32px;
box-shadow: 0 8px 24px rgba(30,58,138,0.25);
position: relative;
}
.gr-pill::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 999px;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #fbbf24 100%);
z-index: -1;
opacity: 0.4;
filter: blur(10px);
}
.gr-pill-en {
font-size: 14px; font-weight: 800; letter-spacing: 0.25em;
color: #fde68a;
}
.gr-pill-sep {
color: rgba(255,255,255,0.5);
letter-spacing: -0.05em;
font-weight: 700;
}
.gr-pill-ko {
font-size: 15px; font-weight: 700;
letter-spacing: -0.01em;
}
.gr-pill-alt {
background: linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 100%);
box-shadow: 0 8px 24px rgba(14,165,233,0.25);
}
/* 큰 헤드라인 — 30px, 모두 동일 크기, 중앙 정렬 */
.gr-headline {
font-size: 30px; font-weight: 700;
line-height: 1.5;
letter-spacing: -0.02em;
color: #0f172a;
margin: 0 0 60px;
text-align: center;
}
.gr-headline strong {
color: #1e3a8a;
font-weight: 800;
font-size: inherit; /* 동일 크기 */
}
.gr-headline-em {
display: inline;
font-size: inherit !important; /* 30px 동일 크기 — 글로벌 span 규칙 무력화 */
font-weight: inherit !important;
letter-spacing: inherit !important;
line-height: inherit !important;
vertical-align: baseline;
background: linear-gradient(135deg, #1e3a8a 0%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 헤드라인 안의 strong 태그도 같은 크기로 강제 */
.gr-section .gr-headline strong { font-size: inherit !important; }
.gr-section .gr-headline span { font-size: inherit !important; }
/* 회장 + 이름 + 입니다 — PC 에서는 한 줄, 모바일은 자연 wrap */
.gr-headline-line { white-space: nowrap; display: inline-block; }
@media (max-width: 992px) {
.gr-headline-line { white-space: normal; word-break: keep-all; }
}
/* 사진 + 본문 그리드 — 본문은 다시 좌측 정렬 */
.gr-content {
display: grid;
grid-template-columns: 320px 1fr;
gap: 50px;
align-items: flex-start;
text-align: left; /* 헤드라인은 중앙, 본문 그리드는 좌측 */
}
.gr-content-reverse { grid-template-columns: 1fr 320px; }
.gr-content-reverse .gr-portrait { order: 2; }
/* 사진 영역 */
.gr-portrait {
position: sticky;
top: 90px;
}
.gr-portrait-frame {
position: relative;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(135deg, #1e3a8a, #0ea5e9);
box-shadow: 0 24px 60px rgba(15,23,42,0.18);
isolation: isolate;
aspect-ratio: 3 / 4;
}
.gr-portrait-frame-alt {
background: linear-gradient(135deg, #0c4a6e, #38bdf8);
box-shadow: 0 24px 60px rgba(14,165,233,0.22);
}
.gr-portrait-bg {
position: absolute; inset: 0;
z-index: 0;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 50%),
radial-gradient(circle at 70% 80%, rgba(251,191,36,0.12), transparent 50%);
}
.gr-portrait-frame img {
position: relative;
display: block;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
}
.gr-portrait-corner {
position: absolute;
width: 38px; height: 38px;
pointer-events: none;
z-index: 2;
}
.gr-corner-tl {
top: 12px; left: 12px;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
border-radius: 8px 0 0 0;
}
.gr-corner-br {
bottom: 12px; right: 12px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
border-radius: 0 0 8px 0;
}
.gr-portrait-name {
margin-top: 22px;
text-align: center;
padding: 18px 16px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.gr-portrait-name small {
display: block;
font-size: 13px; font-weight: 700;
color: #64748b;
letter-spacing: 0.2em;
margin-bottom: 6px;
}
.gr-portrait-name strong {
display: block;
font-size: 26px; font-weight: 900;
color: #0f172a;
letter-spacing: 0.2em;
}
.gr-portrait-name span {
display: block;
font-size: 12px; font-weight: 600;
color: #94a3b8;
letter-spacing: 0.18em;
margin-top: 6px;
}
/* 본문 텍스트 */
.gr-body { font-size: 17px; line-height: 1.95; color: #334155; }
.gr-body p { margin: 0 0 18px; }
.gr-body strong { color: #1e3a8a; font-weight: 700; }
/* 인용 박스 */
.gr-quote {
position: relative;
margin: 28px 0 !important;
padding: 24px 32px 24px 56px;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 0 14px 14px 0;
border-left: 5px solid #0ea5e9;
font-size: 19px !important;
font-weight: 600;
font-style: italic;
color: #0c4a6e !important;
line-height: 1.7;
}
.gr-quote-mark {
position: absolute;
left: 22px; top: 6px;
font-size: 56px; font-weight: 900;
color: #0ea5e9;
line-height: 1;
font-style: normal;
font-family: Georgia, serif;
}
.gr-quote-cap {
display: block;
font-size: 14px;
color: #475569;
margin-top: 8px;
font-style: normal;
font-weight: 600;
}
.gr-quote-warm {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-left-color: #f59e0b;
color: #78350f !important;
}
.gr-quote-warm .gr-quote-mark { color: #f59e0b; }
.gr-quote-em {
background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
border-left-color: #db2777;
color: #831843 !important;
font-size: 20px !important;
font-weight: 700;
}
.gr-quote-em .gr-quote-mark { color: #db2777; }
.gr-quote-em strong { color: #be185d !important; font-weight: 900; }
/* 서명 블록 */
.gr-sign {
margin-top: 50px;
padding: 28px 32px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
border-radius: 14px;
border: 1px solid #c7d2fe;
display: flex; align-items: center; justify-content: flex-end; gap: 24px;
flex-wrap: wrap;
position: relative;
}
.gr-sign-org {
font-size: 15px; font-weight: 700;
color: #1e3a8a;
letter-spacing: 0.05em;
}
.gr-sign-name {
font-size: 28px; font-weight: 900;
color: #0f172a;
letter-spacing: 0.25em;
padding-bottom: 4px;
border-bottom: 2px solid #1e3a8a;
}
.gr-sign-stamp {
width: 60px; height: 60px;
background: rgba(220,38,38,0.06);
border: 3px double #b91c1c;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #b91c1c;
font-size: 11px; font-weight: 800;
letter-spacing: 0.05em;
text-align: center;
line-height: 1.1;
font-family: serif;
transform: rotate(-8deg);
}
.gr-sign-alt { border-color: #bae6fd; background: linear-gradient(135deg, #f8fafc 0%, #ecfeff 100%); }
.gr-sign-alt .gr-sign-org { color: #0c4a6e; }
.gr-sign-alt .gr-sign-name { border-bottom-color: #0ea5e9; }
/* 섹션 구분선 */
.gr-section-sep {
display: flex; justify-content: center;
margin: 80px 0;
}
.gr-section-sep span {
width: 80px; height: 4px;
background: linear-gradient(90deg, transparent, #94a3b8, transparent);
border-radius: 2px;
}
/* 두 번째 블록 — 색감 차별화 */
.gr-block-alt .gr-headline strong { color: #0c4a6e; }
/* 하단 CTA */
.gr-cta-row {
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
margin-top: 60px;
padding-top: 50px;
border-top: 1px solid #e2e8f0;
}
/* 반응형 */
@media (max-width: 992px) {
.gr-section { padding: 50px 0 70px; }
.gr-title { font-size: 36px; letter-spacing: 0.3em; }
.gr-pill { padding: 10px 20px; gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center; }
.gr-pill-en { font-size: 12px; }
.gr-pill-ko { font-size: 14px; }
.gr-headline { font-size: 24px; line-height: 1.5; margin-bottom: 40px; }
.gr-content { grid-template-columns: 1fr; gap: 32px; }
.gr-content-reverse { grid-template-columns: 1fr; }
.gr-content-reverse .gr-portrait { order: 0; }
.gr-portrait { position: static; max-width: 360px; margin: 0 auto; }
.gr-portrait-name strong { font-size: 22px; }
.gr-quote { padding: 20px 22px 20px 50px; font-size: 17px !important; }
.gr-quote-mark { font-size: 44px; left: 16px; }
.gr-sign { gap: 16px; padding: 20px 22px; }
.gr-sign-name { font-size: 22px; }
.gr-section-sep { margin: 50px 0; }
.gr-block { margin-bottom: 50px; }
}
@media (max-width: 480px) {
.gr-title { font-size: 30px; letter-spacing: 0.25em; }
.gr-headline { font-size: 20px; }
.gr-body { font-size: 16px; line-height: 1.85; }
.gr-quote { font-size: 15px !important; padding: 18px 18px 18px 44px; }
.gr-quote-mark { font-size: 36px; left: 12px; }
.gr-sign { flex-direction: column; align-items: flex-end; }
.gr-portrait-name strong { font-size: 19px; letter-spacing: 0.15em; }
}
/* ============================================================
연혁 (.hist-section) — 시대별 타임라인
============================================================ */
.hist-section {
padding: 80px 0 100px;
background: #fff;
position: relative;
overflow: hidden;
}
.hist-section::before {
content: '';
position: absolute;
top: 100px; right: -300px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(30,58,138,0.04), transparent 70%);
z-index: 0;
}
.hist-section > .container { position: relative; z-index: 1; }
/* 인트로 영역 */
.hist-intro { text-align: center; margin-bottom: 80px; }
.hist-intro-pill {
display: inline-flex; align-items: center; gap: 14px;
padding: 12px 28px;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
border-radius: 999px;
color: #fff;
margin-bottom: 32px;
box-shadow: 0 8px 24px rgba(30,58,138,0.25);
}
.hist-intro-en { font-size: 14px; font-weight: 800; letter-spacing: 0.25em; color: #fde68a; }
.hist-intro-sep { color: rgba(255,255,255,0.5); }
.hist-intro-ko { font-size: 15px; font-weight: 700; }
.hist-intro-headline {
font-size: 32px; font-weight: 700;
line-height: 1.5;
color: #0f172a;
margin: 0 0 50px;
letter-spacing: -0.02em;
}
.hist-intro-em {
font-size: inherit !important; /* 부모 헤드라인과 동일 크기 강제 (글로벌 span 규칙 무력화) */
font-weight: 800;
letter-spacing: inherit;
background: linear-gradient(135deg, #1e3a8a 0%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 헤드라인 안의 모든 span — 부모 크기 강제 (글자 작아지는 현상 방지) */
.hist-section .hist-intro-headline span {
font-size: inherit !important;
line-height: inherit !important;
}
/* 통계 */
.hist-stats {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.hist-stats li {
background: linear-gradient(135deg, #f8fafc, #eff6ff);
border: 1px solid #c7d2fe;
border-radius: 16px;
padding: 28px 16px;
text-align: center;
transition: transform .3s, box-shadow .3s;
}
.hist-stats li:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(30,58,138,0.18);
}
.hist-stats strong {
display: block;
font-size: 38px; font-weight: 900;
background: linear-gradient(135deg, #1e3a8a, #2563eb 50%, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
line-height: 1;
}
.hist-stats span {
display: block;
font-size: 13px; font-weight: 700;
color: #64748b;
letter-spacing: 0.1em;
margin-top: 12px;
line-height: 1.4;
}
/* 시대별 그룹 */
.hist-era {
margin-bottom: 80px;
position: relative;
}
.hist-era-head {
margin-bottom: 36px;
text-align: center;
position: relative;
}
.hist-era-head::before {
content: '';
position: absolute;
left: 0; right: 0; top: 50%;
height: 1px;
background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
z-index: 0;
}
.hist-era-tag {
display: inline-block;
padding: 6px 18px;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 999px;
font-size: 12px; font-weight: 800; letter-spacing: 0.25em;
color: #475569;
margin-bottom: 14px;
position: relative; z-index: 1;
}
.hist-era-title {
display: inline-block;
position: relative; z-index: 1;
background: #fff;
padding: 0 24px;
font-size: 36px; font-weight: 900;
color: #0f172a;
letter-spacing: -0.02em;
margin: 0;
}
/* 시대별 색상 */
.hist-era-recent .hist-era-title { color: #1e3a8a; }
.hist-era-recent .hist-year-num { color: #1e3a8a; }
.hist-era-recent .hist-year-dot { background: #1e3a8a; box-shadow: 0 0 0 4px rgba(30,58,138,0.15); }
.hist-era-growth .hist-era-title { color: #0c4a6e; }
.hist-era-growth .hist-year-num { color: #0c4a6e; }
.hist-era-growth .hist-year-dot { background: #0ea5e9; box-shadow: 0 0 0 4px rgba(14,165,233,0.15); }
.hist-era-expand .hist-era-title { color: #047857; }
.hist-era-expand .hist-year-num { color: #047857; }
.hist-era-expand .hist-year-dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
.hist-era-founding .hist-era-title { color: #b45309; }
.hist-era-founding .hist-year-num { color: #b45309; }
.hist-era-founding .hist-year-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.15); }
/* 타임라인 본체 */
.hist-timeline {
position: relative;
padding-left: 0;
}
.hist-timeline::before {
content: '';
position: absolute;
left: 135px; top: 24px; bottom: 0; /* 마커 110px + 25px (dot 중심) = 135px */
width: 2px;
background: linear-gradient(180deg, #cbd5e1 0%, #cbd5e1 90%, transparent 100%);
}
.hist-era-recent .hist-timeline::before { background: linear-gradient(180deg, #1e3a8a, #c7d2fe 90%, transparent); }
.hist-era-growth .hist-timeline::before { background: linear-gradient(180deg, #0ea5e9, #bae6fd 90%, transparent); }
.hist-era-expand .hist-timeline::before { background: linear-gradient(180deg, #10b981, #a7f3d0 90%, transparent); }
.hist-era-founding .hist-timeline::before { background: linear-gradient(180deg, #f59e0b, #fde68a 90%, transparent); }
/* 연도 행 — 마커(연도 텍스트) | gap | dot+선 영역 | 본문 */
.hist-year-row {
display: grid;
grid-template-columns: 110px 1fr; /* 100 → 110px */
gap: 60px; /* 40 → 60px : dot 영역 넉넉히 확보 */
margin-bottom: 30px;
align-items: flex-start;
position: relative;
}
.hist-year-marker {
position: relative;
text-align: right;
padding-right: 0; /* 마커는 우측 끝까지 텍스트 사용 가능 */
padding-top: 14px;
}
.hist-year-num {
font-size: 30px; font-weight: 900;
color: #475569;
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* dot 은 마커 컬럼 밖 (gap 영역) 에 배치 — 연도 텍스트 절대 침범 X */
.hist-year-dot {
position: absolute;
right: -32px; /* 마커 컬럼 우측 32px 밖 (gap 영역 안) */
top: 22px;
width: 16px; height: 16px;
background: #94a3b8;
border: 3px solid #fff;
border-radius: 50%;
z-index: 2;
transition: transform .3s;
}
.hist-year-row:hover .hist-year-dot { transform: scale(1.3); }
/* highlight 연도 — 큰 표시 */
.hist-year-row.is-highlight .hist-year-num {
font-size: 32px;
background: linear-gradient(135deg, currentColor, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hist-year-row.is-highlight .hist-year-dot {
width: 20px; height: 20px;
right: -34px; top: 20px; /* 큰 점도 컬럼 밖 */
animation: histDotPulse 2s ease-in-out infinite;
}
@keyframes histDotPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(251,191,36,0.18); }
50% { box-shadow: 0 0 0 12px rgba(251,191,36,0.05); }
}
/* 이벤트 리스트 */
.hist-events {
list-style: none;
padding: 0;
margin: 0;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.hist-year-row:hover .hist-events {
border-color: #94a3b8;
transform: translateX(4px);
box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.hist-events li {
display: flex; align-items: flex-start; gap: 16px;
padding: 16px 22px;
border-bottom: 1px solid #f1f5f9;
font-size: 15px;
line-height: 1.6;
color: #334155;
}
.hist-events li:last-child { border-bottom: 0; }
.hist-events li.is-star {
background: linear-gradient(90deg, #fef3c7 0%, #fff 70%);
}
.hist-ev-date {
flex-shrink: 0;
min-width: 64px;
font-size: 13px; font-weight: 800;
color: #1e3a8a;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
padding-top: 2px;
}
.hist-ev-text { flex: 1; }
.hist-ev-text strong { color: #1e3a8a; font-weight: 800; }
.hist-events li.is-star .hist-ev-date { color: #b45309; }
.hist-events li.is-star .hist-ev-text strong { color: #b45309; }
/* 시대별 이벤트 카드 강조색 */
.hist-era-recent .hist-ev-date { color: #1e3a8a; }
.hist-era-growth .hist-ev-date { color: #0c4a6e; }
.hist-era-expand .hist-ev-date { color: #047857; }
.hist-era-founding .hist-ev-date { color: #b45309; }
/* 반응형 */
@media (max-width: 992px) {
.hist-section { padding: 50px 0 70px; }
.hist-intro { margin-bottom: 50px; }
.hist-intro-pill { padding: 10px 20px; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hist-intro-en { font-size: 12px; }
.hist-intro-ko { font-size: 13px; }
.hist-intro-headline { font-size: 22px; line-height: 1.5; margin-bottom: 36px; }
.hist-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hist-stats li { padding: 22px 12px; }
.hist-stats strong { font-size: 30px; }
.hist-stats span { font-size: 11px; }
.hist-era { margin-bottom: 50px; }
.hist-era-title { font-size: 26px; padding: 0 16px; }
.hist-era-tag { font-size: 11px; padding: 5px 14px; letter-spacing: 0.18em; }
.hist-year-row { grid-template-columns: 76px 1fr; gap: 40px; margin-bottom: 22px; }
.hist-timeline::before { left: 96px; }
.hist-year-marker { padding-right: 0; }
.hist-year-num { font-size: 22px; }
.hist-year-row.is-highlight .hist-year-num { font-size: 24px; }
.hist-year-dot { right: -22px; top: 16px; width: 12px; height: 12px; }
.hist-year-row.is-highlight .hist-year-dot { width: 16px; height: 16px; right: -24px; top: 14px; }
.hist-events li { padding: 12px 16px; gap: 10px; font-size: 14px; }
.hist-ev-date { min-width: 52px; font-size: 12px; }
}
@media (max-width: 480px) {
.hist-intro-headline { font-size: 19px; }
.hist-stats strong { font-size: 26px; }
.hist-era-title { font-size: 22px; }
.hist-year-row { grid-template-columns: 60px 1fr; gap: 30px; }
.hist-timeline::before { left: 75px; }
.hist-year-marker { padding-right: 0; }
.hist-year-num { font-size: 19px; }
.hist-year-row.is-highlight .hist-year-num { font-size: 21px; }
.hist-year-dot { right: -18px; }
.hist-year-row.is-highlight .hist-year-dot { right: -19px; }
.hist-events li { flex-direction: column; gap: 4px; padding: 12px 14px; }
.hist-ev-date { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hist-stats li, .hist-year-row, .hist-events { transition: none; }
.hist-year-row.is-highlight .hist-year-dot { animation: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* AI 추천 프로젝트 페이지 (/page/ai_support) */
/* 서사: 起 (현실) → 承 (변화) → 轉 (해법) → 結 (조건) */
/* CSS prefix: ais-* */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── 공통 토큰 ─────────────────────────────────────────── */
:root {
--ais-cosmic-1: #0a0a14;
--ais-cosmic-2: #0f1729;
--ais-cosmic-3: #1a1f3a;
--ais-gold: #fbbf24;
--ais-gold-d: #f59e0b;
--ais-blue: #1e3a8a;
--ais-blue-l: #6366f1;
--ais-violet: #a78bfa;
}
/* ── 챕터 마커 ─────────────────────────────────────────── */
.ais-chap-mark {
display: inline-block;
font-family: 'JetBrains Mono', 'Pretendard Variable', monospace;
font-size: 11px; font-weight: 700;
letter-spacing: .3em;
color: var(--ais-gold);
padding: 5px 14px;
border: 1px solid rgba(251, 191, 36, .35);
border-radius: 999px;
text-transform: uppercase;
margin-bottom: 18px;
}
.ais-chap-mark-dark {
color: var(--ais-blue);
border-color: rgba(30, 58, 138, .25);
background: rgba(30, 58, 138, .04);
}
/* ━━━━━━━━━━━━━━━━━━━━━━ */
/* PROLOGUE — HERO */
/* ━━━━━━━━━━━━━━━━━━━━━━ */
.ais-hero {
position: relative;
background: linear-gradient(180deg, var(--ais-cosmic-1) 0%, var(--ais-cosmic-2) 60%, var(--ais-cosmic-3) 100%);
color: #fff;
padding: 130px 0 110px;
overflow: hidden;
isolation: isolate;
}
.ais-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.ais-hero-svg { width: 100%; height: 100%; display: block; }
.ais-glow1 { animation: aisGlowPulse 8s ease-in-out infinite; }
.ais-glow2 { animation: aisGlowPulse 8s ease-in-out 4s infinite; }
@keyframes aisGlowPulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.ais-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: aisLineFlow 8s ease-in-out infinite; }
.ais-line-d2 { animation-delay: 2s; animation-duration: 10s; }
@keyframes aisLineFlow {
0% { stroke-dashoffset: 2000; }
50% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -2000; }
}
.ais-star { animation: aisStarTwinkle 3s ease-in-out infinite; }
.ais-d1 { animation-delay: 0s; } .ais-d2 { animation-delay: .4s; }
.ais-d3 { animation-delay: .8s; } .ais-d4 { animation-delay: 1.2s; }
.ais-d5 { animation-delay: 1.6s; } .ais-d6 { animation-delay: 2.0s; }
.ais-d7 { animation-delay: 2.4s; }
@keyframes aisStarTwinkle {
0%, 100% { opacity: .8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.4); }
}
.ais-hero-inner {
position: relative; z-index: 2;
text-align: center;
}
.ais-hero-tag {
display: inline-block;
margin: 6px 0 22px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700;
letter-spacing: .25em;
color: rgba(255, 255, 255, .55);
}
.ais-hero-title {
font-size: clamp(36px, 5.6vw, 68px);
font-weight: 800;
line-height: 1.18;
letter-spacing: -.025em;
margin: 0 0 26px;
color: #fff;
text-shadow: 0 4px 30px rgba(96, 165, 250, .25);
}
.ais-hero-em {
background: linear-gradient(135deg, var(--ais-gold) 0%, var(--ais-gold-d) 50%, var(--ais-gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ais-hero-sub {
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.8;
color: rgba(255, 255, 255, .78);
margin: 0 auto;
max-width: 720px;
}
.ais-hero-sub strong { color: #fff; font-weight: 700; }
.ais-hero-sub em {
display: inline-block;
margin-top: 12px;
padding: 8px 14px;
background: rgba(251, 191, 36, .12);
border-left: 3px solid var(--ais-gold);
font-style: italic;
font-size: .95em;
color: var(--ais-gold);
border-radius: 4px;
}
.ais-hero-scroll {
margin-top: 60px;
display: inline-flex; flex-direction: column; align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; font-weight: 700;
letter-spacing: .3em;
color: rgba(255, 255, 255, .5);
}
.ais-scroll-dot { stroke: var(--ais-gold); animation: aisScroll 2s ease-in-out infinite; }
@keyframes aisScroll {
0%, 100% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(4px); opacity: .4; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━ */
/* 공통 챕터 섹션 */
/* ━━━━━━━━━━━━━━━━━━━━━━ */
.ais-chap {
position: relative;
padding: 110px 0;
overflow: hidden;
}
.ais-chap-head {
text-align: center;
margin-bottom: 60px;
}
.ais-chap-head-light .ais-chap-mark {
color: var(--ais-gold);
border-color: rgba(251, 191, 36, .4);
}
.ais-chap-title {
font-size: clamp(30px, 4.2vw, 48px);
font-weight: 800;
line-height: 1.25;
letter-spacing: -.02em;
color: #0f172a;
margin: 0 0 18px;
}
.ais-chap-head-light .ais-chap-title { color: #fff; }
.ais-chap-sub {
font-size: 17px; color: #475569; line-height: 1.75;
max-width: 720px; margin: 18px auto 0;
}
.ais-chap-sub-light { color: rgba(255, 255, 255, .8); }
.ais-chap-sub-light strong { color: var(--ais-gold); }
.ais-chap-tail {
margin-top: 60px;
text-align: center;
font-size: clamp(18px, 2vw, 22px);
color: #1e293b;
font-weight: 600;
line-height: 1.65;
letter-spacing: -.01em;
}
.ais-chap-tail strong { color: #0f172a; font-weight: 800; }
.ais-chap-tail em { color: #ef4444; font-style: italic; font-weight: 700; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 전환 카피 — Chapter 02 ↔ Q&A 콜아웃 사이의 다리 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ais-bridge {
padding: 80px 0;
background:
linear-gradient(180deg, #ffffff 0%, #fafbff 50%, #ffffff 100%);
text-align: center;
position: relative;
}
.ais-bridge::before,
.ais-bridge::after {
content: '';
position: absolute;
left: 50%;
width: 1px; height: 30px;
background: linear-gradient(180deg, transparent, rgba(146, 64, 14, .35), transparent);
transform: translateX(-50%);
}
.ais-bridge::before { top: 0; }
.ais-bridge::after { bottom: 0; }
/* 좌우 15% 여백은 .container 가 처리 */
.ais-bridge > .container { padding-left: 15%; padding-right: 15%; max-width: none; }
.ais-bridge-q {
margin: 0;
line-height: 1.65;
letter-spacing: -.01em;
}
.ais-bridge-before,
.ais-bridge-after {
display: block;
}
.ais-bridge-before {
font-size: clamp(18px, 2.2vw, 26px) !important;
color: #94a3b8;
font-style: italic;
font-weight: 500;
margin-bottom: 18px;
position: relative;
}
.ais-bridge-before::before {
content: '\201C'; /* 큰 따옴표 시작 “ */
position: relative;
left: -2px;
color: #cbd5e1;
font-size: 1.2em;
display: none; /* HTML 안에 이미 따옴표 포함되어 있어 미사용 */
}
.ais-bridge-after {
font-size: clamp(22px, 3vw, 34px) !important;
color: #0f172a;
font-weight: 700;
letter-spacing: -.015em;
}
.ais-bridge-after strong {
color: #ef4444;
font-weight: 900;
position: relative;
display: inline-block;
font-size: 1.15em !important; /* "AI" 살짝 더 크게 — 자조의 핀포인트 */
}
.ais-bridge-after strong::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 2px;
height: 8px;
background: rgba(239, 68, 68, .18);
z-index: -1;
border-radius: 2px;
}
.ais-bridge-after em {
font-style: italic; /* 어이없는 톤을 살려 이탤릭 유지 */
background: linear-gradient(transparent 60%, rgba(251, 191, 36, .45) 60%);
padding: 0 4px;
font-weight: 800;
}
/* 자조의 "!?" 마크 — 약간 기울이고 빨간색 강조 */
.ais-bridge-mark {
display: inline-block !important;
font-size: 1.1em !important;
font-weight: 900;
color: #ef4444;
letter-spacing: -.05em;
transform: translateY(-2px) rotate(-3deg);
margin-left: 4px;
font-style: normal;
}
/* 모바일 */
@media (max-width: 768px) {
.ais-bridge { padding: 50px 0; }
.ais-bridge > .container { padding-left: 5%; padding-right: 5%; }
.ais-bridge-before { margin-bottom: 14px; }
.ais-bridge-after strong::after { height: 6px; bottom: 1px; }
}
/* ── Bridge ② — Q&A 답변 → 4가지 지원 패키지 (결심·확신 톤) ── */
.ais-bridge-2 {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #eef2ff 100%);
/* 다음 섹션이 다크라 아래쪽 그라디언트로 자연 연결 */
}
.ais-bridge-2::after {
/* 아래쪽 세로선을 골드로 — 다음 다크 섹션의 골드 톤과 매칭 */
background: linear-gradient(180deg, transparent, rgba(251, 191, 36, .65), transparent);
height: 50px;
}
.ais-bridge-q-2 .ais-bridge-after {
font-size: clamp(22px, 3vw, 34px) !important;
color: #0f172a;
font-weight: 700;
line-height: 1.55;
}
/* "교습소" 강조 — 골드 따옴표 + 형광펜 */
.ais-bridge-q-2 .ais-bridge-after em {
font-style: normal;
background: linear-gradient(transparent 60%, rgba(251, 191, 36, .55) 60%);
color: #92400e;
font-weight: 800;
padding: 0 4px;
}
/* "AI" 빨강 — bridge ① 와 동일 시그니처 (자조 → 결심으로 톤만 전환) */
.ais-bridge-q-2 .ais-bridge-after strong {
color: #dc2626;
font-weight: 900;
font-size: 1.12em !important;
letter-spacing: -.02em;
}
/* "하기 위해—" 트레일 — 다음 챕터로 이끄는 시각적 화살 */
.ais-bridge-trail {
display: inline-block !important;
margin-top: 10px;
font-weight: 700;
}
.ais-bridge-dash {
display: inline-block !important;
font-weight: 800;
color: #fbbf24;
font-size: 1.4em !important;
margin-left: 4px;
letter-spacing: -.05em;
animation: aisBridgeDash 2.4s ease-in-out infinite;
text-shadow: 0 0 12px rgba(251, 191, 36, .5);
}
@keyframes aisBridgeDash {
0%, 100% { transform: translateX(0); opacity: .85; }
50% { transform: translateX(8px); opacity: 1; }
}
@media (max-width: 768px) {
.ais-bridge-trail { display: block !important; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.ais-bridge-dash { animation: none; }
}
/* 질문형 tail — 마지막에 한 박자 더 (생각하게 만드는 톤) */
.ais-chap-tail-q {
margin-top: 14px !important;
font-weight: 600;
}
.ais-chap-tail-q em {
display: inline-block;
padding: 6px 18px;
background: rgba(146, 64, 14, .08);
border: 1px dashed rgba(146, 64, 14, .35);
border-radius: 999px;
color: #92400e !important;
font-style: italic !important;
font-weight: 600 !important;
letter-spacing: -.005em;
}
@media (max-width: 768px) {
.ais-chap-tail-q em { padding: 5px 14px; font-size: 15px; }
}
.ais-em {
background: linear-gradient(135deg, var(--ais-blue) 0%, var(--ais-blue-l) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ━━━━━━━━━━━━━━━━━━━━━━ */
/* 起 — 동네 교습소의 현실 */
/* ━━━━━━━━━━━━━━━━━━━━━━ */
.ais-chap-1 {
background: linear-gradient(180deg, #fefdf9 0%, #f8f5ec 100%);
}
.ais-chap-1::before {
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 10% 20%, rgba(251, 191, 36, .08) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(251, 191, 36, .05) 0%, transparent 40%);
pointer-events: none;
}
.ais-chap-1 > .container { position: relative; z-index: 1; }
.ais-story {
max-width: 760px; margin: 0 auto;
text-align: center;
}
.ais-story-lead {
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.65;
color: #1e293b;
font-weight: 600;
margin: 0 0 28px;
letter-spacing: -.015em;
}
.ais-story-lead strong { color: #92400e; font-weight: 800; }
.ais-story-body {
font-size: 16px; line-height: 1.85;
color: #475569;
margin: 0 0 18px;
}
.ais-story-body em { font-style: italic; color: #92400e; }
.ais-story-body strong { color: #1e293b; font-weight: 700; }
.ais-reality {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin: 60px 0 0;
width: 100%;
max-width: none;
}
.ais-reality-item {
display: flex; align-items: center; gap: 18px;
padding: 26px 28px;
background: #fff;
border: 1px solid rgba(146, 64, 14, .15);
border-radius: 14px;
transition: transform .2s, box-shadow .2s, border-color .2s;
min-height: 96px;
}
.ais-reality-item:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px -12px rgba(146, 64, 14, .2);
border-color: rgba(146, 64, 14, .35);
}
.ais-reality-ico {
flex-shrink: 0;
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-radius: 12px;
color: #92400e;
}
.ais-reality-ico svg { width: 32px; height: 32px; }
.ais-reality-txt { min-width: 0; flex: 1; }
.ais-reality-txt strong {
display: block;
font-size: 17px !important; font-weight: 700;
color: #1e293b;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ais-reality-txt span {
display: block;
font-size: 14px !important; color: #94a3b8;
white-space: nowrap; /* ★ 한 줄 강제 */
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -.005em;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 承 — 검색의 시대가 끝났다 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ais-chap-2 {
background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
/* 채팅 데모 */
.ais-chat-demo {
max-width: 720px;
margin: 0 auto;
background: #fff;
border-radius: 18px;
border: 1px solid #e2e8f0;
box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .15);
overflow: hidden;
}
.ais-chat-header {
padding: 14px 20px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.ais-chat-app {
display: inline-flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 700;
color: #475569;
letter-spacing: .02em;
}
.ais-chat-body {
padding: 28px 24px;
display: flex; flex-direction: column;
gap: 18px;
}
.ais-bubble {
max-width: 85%;
padding: 16px 20px;
border-radius: 18px;
line-height: 1.65;
font-size: 15px;
position: relative;
}
.ais-bubble-name {
font-size: 11px; font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.ais-bubble-user {
align-self: flex-end;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
color: #fff;
border-bottom-right-radius: 4px;
}
.ais-bubble-user .ais-bubble-name { color: rgba(255, 255, 255, .8); }
.ais-bubble-user p { margin: 0; }
.ais-bubble-ai {
align-self: flex-start;
background: #f8fafc;
color: #1e293b;
border: 1px solid #e2e8f0;
border-bottom-left-radius: 4px;
}
.ais-bubble-ai .ais-bubble-name { color: #10a37f; }
.ais-ai-dot {
display: inline-block;
width: 6px; height: 6px;
background: #10a37f;
border-radius: 50%;
animation: aisAiPulse 2s ease-in-out infinite;
}
@keyframes aisAiPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.ais-bubble-ai p { margin: 0 0 10px; }
.ais-bubble-ai p:last-child { margin-bottom: 0; }
.ais-bubble-list {
list-style: none; padding: 0;
margin: 10px 0;
}
.ais-bubble-list li {
padding: 8px 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 6px;
font-size: 14px;
color: #475569;
}
.ais-bubble-list li:last-child { margin-bottom: 0; }
.ais-bubble-foot {
font-size: 12px !important;
color: #94a3b8;
font-style: italic;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 중간 콜아웃 — 전문가 답변 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ais-callout-section {
padding: 90px 0;
background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%);
}
.ais-callout {
max-width: 880px;
margin: 0 auto;
background: #fff;
border-radius: 24px;
border: 2px solid var(--ais-gold);
box-shadow: 0 30px 80px -30px rgba(251, 191, 36, .35);
overflow: hidden;
position: relative;
}
.ais-callout::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(251, 191, 36, .04) 0%, transparent 60%);
pointer-events: none;
}
.ais-callout-q {
position: relative;
padding: 32px 40px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
display: flex; gap: 18px;
align-items: flex-start;
}
.ais-callout-q-mark {
flex-shrink: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 32px; font-weight: 800;
color: #92400e;
line-height: 1;
}
.ais-callout-q p {
margin: 6px 0 0;
font-size: clamp(17px, 1.8vw, 22px);
font-weight: 700;
color: #1e293b;
line-height: 1.55;
letter-spacing: -.01em;
}
.ais-callout-q strong { color: #b45309; }
.ais-callout-a {
position: relative;
padding: 36px 40px 40px;
display: flex; gap: 18px;
align-items: flex-start;
}
.ais-callout-a-mark {
flex-shrink: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 32px; font-weight: 800;
color: var(--ais-blue);
line-height: 1;
}
.ais-callout-a-body { flex: 1; }
.ais-callout-a-lead {
font-size: 18px; font-weight: 600;
color: #1e293b;
line-height: 1.65;
margin: 6px 0 22px;
}
.ais-callout-a-lead strong { color: var(--ais-blue); font-weight: 800; }
.ais-callout-points {
list-style: none; padding: 0; margin: 0 0 24px;
display: flex; flex-direction: column; gap: 14px;
}
.ais-callout-points li {
padding: 16px 20px;
background: #f8fafc;
border-left: 3px solid var(--ais-blue);
border-radius: 8px;
font-size: 15px;
line-height: 1.7;
color: #475569;
}
.ais-callout-points li strong { color: #0f172a; font-weight: 700; }
.ais-callout-points li em {
font-style: italic;
color: var(--ais-blue);
font-weight: 600;
}
.ais-callout-summary {
margin-top: 4px;
padding: 18px 22px;
background: linear-gradient(135deg, #1e3a8a 0%, #6366f1 100%);
color: #fff;
border-radius: 12px;
font-size: 15px;
line-height: 1.7;
}
.ais-callout-summary strong { color: var(--ais-gold); font-weight: 800; }
.ais-callout-summary em {
display: block;
margin-top: 6px;
font-style: italic;
color: rgba(255, 255, 255, .85);
font-size: .95em;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 轉 — 4가지 지원 패키지 (다크 + 카드) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ais-chap-3 {
background:
radial-gradient(circle at 20% 0%, rgba(99, 102, 241, .25) 0%, transparent 50%),
radial-gradient(circle at 80% 100%, rgba(251, 191, 36, .2) 0%, transparent 50%),
linear-gradient(180deg, var(--ais-cosmic-2) 0%, var(--ais-cosmic-3) 100%);
color: #fff;
}
.ais-pack-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
}
.ais-pack {
position: relative;
padding: 36px 32px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 20px;
backdrop-filter: blur(10px);
transition: transform .3s, border-color .3s, background .3s;
overflow: hidden;
/* ★ 아이콘 + 타이틀을 한 줄로 정렬하기 위한 그리드 레이아웃 */
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"head head"
"icon title"
"desc desc"
"list list";
column-gap: 20px;
row-gap: 14px;
align-items: start;
}
.ais-pack::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, var(--pack-glow, rgba(251, 191, 36, .12)) 0%, transparent 60%);
opacity: 0; transition: opacity .3s;
pointer-events: none;
}
.ais-pack:hover {
transform: translateY(-6px);
border-color: rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .06);
}
.ais-pack:hover::before { opacity: 1; }
.ais-pack-1 { --pack-glow: rgba(251, 191, 36, .15); }
.ais-pack-2 { --pack-glow: rgba(99, 102, 241, .15); }
.ais-pack-3 { --pack-glow: rgba(167, 139, 250, .15); }
.ais-pack-4 { --pack-glow: rgba(244, 114, 182, .15); }
.ais-pack-head {
grid-area: head;
display: flex; align-items: center; gap: 16px;
margin-bottom: 8px; /* 그리드 row-gap 으로 대체 */
flex-wrap: wrap; /* 한국어 긴 태그는 다음 줄로 wrap */
}
/* ── 한국어 설명형 태그 — "01" 옆 한 줄 정렬 (자간 0, 박스 자동 축소) ── */
.ais-pack-tag-ko {
flex: 0 1 auto; /* ★ 컨텐츠만큼만 크기, 100% 절대 차지 X */
font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
font-size: 12px !important; /* "01" 과 한 줄에 맞추기 위해 축소 */
font-weight: 700 !important;
letter-spacing: 0 !important; /* ★ 정상 자간 */
text-transform: none;
white-space: nowrap !important; /* 한 줄 강제 */
overflow: hidden;
text-overflow: ellipsis;
min-width: 0; /* flex 자식이 줄어들 수 있도록 */
line-height: 1.4;
text-align: left;
/* 시안 톤 — "AI 전문" 과 동일 시그니처 */
color: #a7f3fc !important;
background: linear-gradient(135deg, rgba(103, 232, 249, .14), rgba(99, 102, 241, .08)) !important;
border: 1px solid rgba(103, 232, 249, .4) !important;
border-radius: 10px !important;
padding: 7px 12px !important; /* 박스 컴팩트 */
text-shadow: 0 0 10px rgba(103, 232, 249, .25);
box-shadow: 0 0 24px -8px rgba(103, 232, 249, .35);
}
.ais-pack-tag-ko em {
font-style: normal !important;
color: #fbbf24 !important;
font-weight: 800 !important;
background: rgba(251, 191, 36, .14);
padding: 1px 4px !important;
border-radius: 4px;
margin: 0;
letter-spacing: 0 !important; /* em 도 정상 자간 */
}
/* PC 와이드 카드는 nowrap, 좁은 카드는 wrap 으로 폴백 */
.ais-pack-head { flex-wrap: nowrap; }
@media (max-width: 1024px) {
/* 1열 그리드 폴백 시 — 번호 아래로 wrap (가독성 유지) */
.ais-pack-head { flex-wrap: wrap; }
.ais-pack-tag-ko {
flex: 1 1 100%;
font-size: 13px !important;
padding: 8px 13px !important;
}
}
@media (max-width: 480px) {
.ais-pack-tag-ko {
font-size: 12px !important;
padding: 7px 11px !important;
}
}
.ais-pack-num {
font-family: 'JetBrains Mono', monospace;
font-size: 36px; font-weight: 800;
background: linear-gradient(135deg, var(--ais-gold), var(--ais-gold-d));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
}
.ais-pack-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; font-weight: 700;
letter-spacing: .25em;
color: rgba(255, 255, 255, .55);
padding: 5px 11px;
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 999px;
}
.ais-pack-icon {
grid-area: icon;
width: 64px; height: 64px;
margin-bottom: 0; /* 한 줄 정렬을 위해 하단 여백 제거 */
color: var(--ais-gold);
align-self: center;
flex-shrink: 0;
}
.ais-pack-icon svg { width: 100%; height: 100%; }
.ais-pack-2 .ais-pack-icon { color: #c4b5fd; }
.ais-pack-3 .ais-pack-icon { color: #fda4af; }
.ais-pack-4 .ais-pack-icon { color: #67e8f9; }
.ais-pack-title {
grid-area: title;
font-size: 24px; font-weight: 800;
color: #fff;
margin: 0; /* 그리드 row-gap 사용 */
letter-spacing: -.01em;
align-self: center; /* 아이콘과 수직 가운데 정렬 */
line-height: 1.3;
}
.ais-pack-desc {
grid-area: desc;
font-size: 15px;
line-height: 1.75;
color: rgba(255, 255, 255, .75);
margin: 8px 0 0;
}
.ais-pack-desc strong {
color: var(--ais-gold);
font-weight: 700;
}
.ais-pack-list {
grid-area: list;
list-style: none; padding: 0; margin: 8px 0 0;
display: flex; flex-direction: column; gap: 10px;
}
.ais-pack-list li {
padding-left: 22px;
position: relative;
font-size: 14px;
color: rgba(255, 255, 255, .85);
line-height: 1.55;
}
.ais-pack-list li::before {
content: '';
position: absolute;
left: 0; top: 9px;
width: 6px; height: 6px;
background: var(--ais-gold);
border-radius: 50%;
box-shadow: 0 0 12px rgba(251, 191, 36, .6);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 結 — 조건과 비용 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ais-chap-4 {
background: #fafbff;
}
/* 정회원 한정 강조 박스 */
.ais-condition {
display: flex; gap: 28px;
align-items: center;
max-width: 880px;
margin: 0 auto 70px;
padding: 36px 40px;
background: linear-gradient(135deg, #fff7e6 0%, #fef3c7 100%);
border: 2px solid var(--ais-gold);
border-radius: 20px;
box-shadow: 0 24px 60px -24px rgba(251, 191, 36, .35);
position: relative;
overflow: hidden;
}
.ais-condition::before {
content: '★';
position: absolute;
top: -10px; right: 16px;
font-size: 60px;
color: rgba(251, 191, 36, .12);
font-weight: 800;
}
.ais-condition-icon {
flex-shrink: 0;
width: 72px; height: 72px;
color: var(--ais-gold-d);
}
.ais-condition-icon svg { width: 100%; height: 100%; }
.ais-condition-body { flex: 1; position: relative; z-index: 1; }
.ais-condition-title {
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 800;
color: #92400e;
margin: 0 0 10px;
letter-spacing: -.01em;
}
.ais-condition-title strong {
background: linear-gradient(135deg, #b45309, #92400e);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ais-condition-desc {
font-size: 15px;
line-height: 1.75;
color: #78350f;
margin: 0;
}
.ais-condition-desc strong { color: #92400e; font-weight: 700; }
.ais-condition-desc em { color: #b45309; font-style: italic; }
/* 가격 비교 표 */
.ais-pricing {
max-width: 980px;
margin: 0 auto;
}
.ais-pricing-head {
text-align: center;
margin-bottom: 36px;
}
.ais-pricing-tag {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-weight: 700;
letter-spacing: .25em;
color: #fff;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 16px;
}
.ais-pricing-title {
font-size: clamp(22px, 2.8vw, 32px);
font-weight: 800;
color: #0f172a;
letter-spacing: -.02em;
margin: 0 0 10px;
line-height: 1.4;
}
.ais-pricing-sub {
font-size: 14px;
color: #64748b;
margin: 0;
}
/* ── 가격표 그룹 (① 기본선택 / ② 선택사항) ── */
.ais-price-group {
margin-bottom: 36px;
}
.ais-price-group:last-of-type { margin-bottom: 0; }
.ais-price-group-title {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
padding: 14px 22px;
background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
border-left: 5px solid #6366f1;
border-radius: 10px;
flex-wrap: wrap;
}
.ais-price-group-2 .ais-price-group-title {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border-left-color: #f59e0b;
}
.ais-price-group-num {
font-family: 'JetBrains Mono', 'Pretendard Variable', monospace !important;
font-size: 26px !important;
font-weight: 800;
color: #6366f1;
line-height: 1;
}
.ais-price-group-2 .ais-price-group-num { color: #f59e0b; }
.ais-price-group-name {
font-size: 19px !important;
font-weight: 800;
color: #0f172a;
letter-spacing: -.01em;
}
.ais-price-group-desc {
font-size: 14px !important;
color: #64748b;
margin-left: auto;
font-weight: 600;
}
@media (max-width: 768px) {
.ais-price-group-title { padding: 12px 16px; gap: 10px; }
.ais-price-group-num { font-size: 22px !important; }
.ais-price-group-name { font-size: 16px !important; }
.ais-price-group-desc { font-size: 12px !important; margin-left: 0; flex-basis: 100%; }
}
.ais-price-table {
background: #fff;
border-radius: 16px;
border: 1px solid #e2e8f0;
overflow: hidden;
box-shadow: 0 18px 50px -20px rgba(15, 23, 42, .15);
}
.ais-price-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
align-items: center;
}
.ais-price-row + .ais-price-row {
border-top: 1px solid #f1f5f9;
}
.ais-price-head {
background: linear-gradient(135deg, #1e3a8a 0%, #6366f1 100%);
color: #fff;
}
/* 선택사항 표 헤더 — 짙은 초록으로 차별화 */
.ais-price-group-2 .ais-price-head {
background: linear-gradient(135deg, #14532d 0%, #15803d 100%);
}
.ais-price-cell {
padding: 22px 24px;
font-size: 15px;
color: #1e293b;
line-height: 1.55;
}
.ais-price-head .ais-price-cell {
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-align: center;
}
.ais-price-head .ais-price-cell-em { color: var(--ais-gold); }
.ais-price-cell strong {
display: block;
font-size: 16px;
font-weight: 700;
color: #0f172a;
margin-bottom: 4px;
}
.ais-price-cell em {
display: block;
font-size: 12px;
font-style: normal;
color: #94a3b8;
}
.ais-price-strike {
text-align: center;
text-decoration: line-through;
color: #cbd5e1;
font-weight: 600;
}
.ais-price-cell-em {
text-align: center;
font-size: 22px;
font-weight: 800;
color: #ef4444;
letter-spacing: -.01em;
}
.ais-price-cell-em small {
display: inline-block;
margin-top: 4px;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
letter-spacing: 0;
}
.ais-price-foot {
margin: 22px 0 0;
font-size: 12px;
color: #94a3b8;
line-height: 1.7;
text-align: center;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* EPILOGUE — CTA */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ais-cta-section {
padding: 110px 0;
background:
radial-gradient(circle at 50% 0%, rgba(251, 191, 36, .15) 0%, transparent 50%),
linear-gradient(180deg, var(--ais-cosmic-3) 0%, var(--ais-cosmic-1) 100%);
color: #fff;
}
.ais-cta-box {
text-align: center;
/* 3-step 카드(min-width 280px)+화살표 한 줄 수용 */
max-width: 1100px;
margin: 0 auto;
padding: 60px 44px;
background: linear-gradient(135deg, rgba(99, 102, 241, .15), rgba(251, 191, 36, .08));
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 24px;
backdrop-filter: blur(10px);
}
.ais-cta-tag {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-weight: 700;
letter-spacing: .3em;
color: var(--ais-gold);
margin-bottom: 16px;
padding: 5px 14px;
border: 1px solid rgba(251, 191, 36, .35);
border-radius: 999px;
}
.ais-cta-title {
font-size: clamp(28px, 4vw, 46px);
font-weight: 800;
line-height: 1.25;
margin: 0 0 18px;
color: #fff;
letter-spacing: -.02em;
}
.ais-cta-em {
background: linear-gradient(135deg, var(--ais-gold), var(--ais-gold-d));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ais-cta-sub {
font-size: 16px; line-height: 1.75;
color: rgba(255, 255, 255, .78);
margin: 0 0 40px;
}
/* CTA 단계 플로우 */
.ais-cta-flow {
display: flex; align-items: center; justify-content: center;
gap: 14px;
margin: 0 0 40px;
flex-wrap: wrap;
}
.ais-cta-step {
display: flex; flex-direction: column; align-items: center;
padding: 18px 24px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 14px;
/* "정회원 가입 후 3개월 이내에 회비 납부" 한 줄 표시 위해 박스 확장 */
min-width: 280px;
}
.ais-cta-step-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-weight: 800;
color: var(--ais-gold);
letter-spacing: .15em;
margin-bottom: 6px;
}
.ais-cta-step strong {
font-size: 16px; font-weight: 700;
color: #fff;
margin-bottom: 4px;
white-space: nowrap;
}
.ais-cta-step em {
font-size: 13px;
color: rgba(255, 255, 255, .65);
font-style: normal;
/* 박스를 키워서라도 한 줄로 표시 */
white-space: nowrap;
}
.ais-cta-arrow {
font-size: 20px;
color: var(--ais-gold);
font-weight: 800;
opacity: .6;
}
.ais-cta-actions {
display: flex; justify-content: center; gap: 14px;
flex-wrap: wrap;
}
.ais-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 32px;
font-size: 15px; font-weight: 700;
text-decoration: none;
border-radius: 12px;
transition: transform .2s, box-shadow .2s, background .2s;
}
.ais-btn-primary {
background: linear-gradient(135deg, var(--ais-gold) 0%, var(--ais-gold-d) 100%);
color: #0f172a;
box-shadow: 0 12px 36px -8px rgba(251, 191, 36, .55);
}
.ais-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -6px rgba(251, 191, 36, .7); }
.ais-btn-ghost {
background: rgba(255, 255, 255, .08);
color: #fff;
border: 1px solid rgba(255, 255, 255, .25);
}
.ais-btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); }
/* EPILOGUE CTA — 큰 23px 변형 */
.ais-cta-actions-lg .ais-btn {
font-size: 23px !important;
font-weight: 800 !important;
padding: 20px 40px !important;
border-radius: 14px !important;
letter-spacing: -.01em !important;
}
@media (max-width: 768px) {
.ais-cta-actions-lg .ais-btn {
font-size: 18px !important;
padding: 16px 28px !important;
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━ */
/* 반응형 */
/* ━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1280px) {
.ais-reality { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
.ais-pack-grid { grid-template-columns: 1fr; }
.ais-price-row { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (max-width: 768px) {
.ais-hero { padding: 90px 0 80px; }
.ais-chap, .ais-callout-section, .ais-cta-section { padding: 70px 0; }
.ais-pc-br { display: none; }
.ais-reality { grid-template-columns: 1fr; gap: 12px; }
.ais-reality-item { padding: 14px 16px; }
.ais-bubble { max-width: 92%; font-size: 14px; }
.ais-chat-body { padding: 22px 16px; }
.ais-callout-q, .ais-callout-a { padding: 24px 22px; flex-direction: column; gap: 8px; }
.ais-callout-q-mark, .ais-callout-a-mark { font-size: 24px; }
.ais-pack { padding: 28px 22px; }
.ais-pack-title { font-size: 20px; }
.ais-condition { flex-direction: column; padding: 28px 24px; gap: 18px; text-align: center; }
.ais-condition-icon { width: 60px; height: 60px; }
.ais-price-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
.ais-price-head { display: none; }
.ais-price-cell { padding: 4px 18px; text-align: left; }
.ais-price-cell:first-child { padding-top: 14px; padding-bottom: 6px; }
.ais-price-cell.ais-price-strike {
font-size: 13px; padding-bottom: 0;
}
.ais-price-cell.ais-price-strike::before {
content: '시장가 ';
color: #94a3b8;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
margin-right: 6px;
text-decoration: none;
display: inline-block;
}
.ais-price-cell.ais-price-cell-em {
font-size: 22px;
padding-top: 4px; padding-bottom: 12px;
}
.ais-price-cell.ais-price-cell-em::before {
content: '회원가 ';
color: #94a3b8;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
margin-right: 6px;
display: inline-block;
vertical-align: middle;
}
.ais-cta-box { padding: 44px 22px; }
.ais-cta-flow { gap: 8px; }
.ais-cta-step { padding: 14px 16px; min-width: 240px; flex: 1 1 240px; }
.ais-cta-step em { font-size: 12px; }
.ais-cta-arrow { font-size: 16px; }
.ais-cta-actions .ais-btn { width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
.ais-hero-title { font-size: 32px; }
.ais-chap-title { font-size: 26px; }
.ais-cta-flow { flex-direction: column; }
.ais-cta-arrow { transform: rotate(90deg); }
.ais-cta-step { width: 100%; min-width: 0; }
.ais-cta-step em {
/* 모바일 좁은 화면에서 너무 좁아지면 줄바꿈 허용 */
white-space: normal;
word-break: keep-all;
}
}
@media (prefers-reduced-motion: reduce) {
.ais-glow1, .ais-glow2, .ais-line, .ais-star, .ais-scroll-dot, .ais-ai-dot { animation: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ai_support 페이지 — 디테일 보강 (v2) */
/* · 좌우 15% 여백 + 18px 기본 폰트(최소 16px) */
/* · 강조어 +2px / 반짝 애니메이션 / 다국어 노트 / 회비 박스 */
/* · 모바일 최적화 통합 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── 좌·우 15% 여백 (PC) — 내부 max-width 제약 모두 해제 ── */
.ais-hero > .container,
.ais-chap > .container,
.ais-callout-section > .container,
.ais-cta-section > .container {
max-width: none;
padding-left: 15%;
padding-right: 15%;
}
/* 내부 요소들의 좁은 max-width 를 풀어서 70% 폭을 가득 채우게 한다 */
@media (min-width: 769px) {
.ais-hero-sub,
.ais-story,
.ais-chat-demo,
.ais-callout,
.ais-condition,
.ais-pricing,
.ais-pack-grid,
.ais-cta-box,
.ais-multilingual-note {
max-width: none !important;
width: 100%;
}
/* 가격표·콜아웃: 가운데 정렬 마진 해제 */
.ais-callout, .ais-condition, .ais-pricing, .ais-cta-box,
.ais-multilingual-note, .ais-story, .ais-chat-demo {
margin-left: 0;
margin-right: 0;
}
}
/* ── PC 본문 기본 18px / 최소 16px ── */
@media (min-width: 769px) {
.ais-hero,
.ais-chap,
.ais-callout-section,
.ais-cta-section { font-size: 18px; }
/* 본문 단락 — 18px */
.ais-story-body,
.ais-pack-desc,
.ais-bubble,
.ais-callout-points li,
.ais-callout-summary,
.ais-condition-desc,
.ais-cta-sub,
.ais-hero-sub { font-size: 18px; line-height: 1.85; }
/* 부가 라인 — 16px */
.ais-pack-list li,
.ais-bubble-list li,
.ais-pricing-sub,
.ais-cta-step em,
.ais-bubble-foot,
.ais-price-foot,
.ais-reality-txt span { font-size: 16px; }
/* 셀 본문 18px (em 보조 텍스트는 16px) */
.ais-price-cell { font-size: 18px; }
.ais-price-cell em { font-size: 14px; }
/* CTA 단계 라벨 */
.ais-cta-step strong { font-size: 18px; }
.ais-cta-step em { font-size: 16px; }
/* 챕터 마무리 단락 — 강조 큼 */
.ais-chap-tail { font-size: 22px; line-height: 1.8; }
}
/* ── ★ 글로벌 .site-main span:18px 규칙 우선순위 무력화 ★ ── */
/* 글로벌 룰의 specificity (0,7,1) 를 이기기 위해 !important 사용 */
.ais-hero span,
.ais-chap span,
.ais-callout-section span,
.ais-cta-section span {
font-size: inherit !important;
line-height: inherit !important;
}
/* 명시적 px 크기를 가진 span 들은 다시 강제 */
.ais-chap-mark { font-size: 11px !important; }
.ais-hero-tag { font-size: 12px !important; letter-spacing: .25em !important; }
.ais-pack-num { font-size: 36px !important; line-height: 1 !important; }
.ais-pack-tag:not(.ais-pack-tag-ko) { font-size: 10px !important; letter-spacing: .25em !important; }
.ais-pack-tag.ais-pack-tag-ko { letter-spacing: 0 !important; }
.ais-bubble-name { font-size: 11px !important; letter-spacing: .12em !important; }
.ais-bubble-foot { font-size: 12px !important; }
.ais-callout-q-mark,
.ais-callout-a-mark { font-size: 32px !important; line-height: 1 !important; }
.ais-pricing-tag { font-size: 11px !important; letter-spacing: .25em !important; }
.ais-pricing-tag-plain{ font-size: 14px !important; letter-spacing: 0 !important; }
.ais-cta-tag { font-size: 11px !important; letter-spacing: .3em !important; }
.ais-cta-step-num { font-size: 11px !important; letter-spacing: .15em !important; }
.ais-multilingual-tag { font-size: 11px !important; letter-spacing: .25em !important; }
.ais-fee-label { font-size: 15px !important; }
.ais-fee-amt { font-size: 22px !important; line-height: 1.2 !important; }
.ais-fee-amt em { font-size: 13px !important; }
.ais-price-cell-em { font-size: 22px !important; line-height: 1.2 !important; }
.ais-price-cell-em small { font-size: 11px !important; }
.ais-price-cell em { font-size: 12px !important; }
.ais-hero-scroll span { font-size: 10px !important; letter-spacing: .3em !important; }
/* ── HERO 한국어 태그 — 골드 펄 + 스파클 텍스트 ── */
/* 뒷쪽 .ais-hero-tag !important 보다 specificity 높게 (compound selector) */
.ais-hero-tag.ais-hero-tag-ko {
display: inline-block !important;
font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: -.005em !important;
text-transform: none !important;
padding: 8px 22px;
border: 1px solid rgba(251, 191, 36, .45) !important;
border-radius: 999px;
background: rgba(251, 191, 36, .08) !important;
margin: 6px 0 22px;
position: relative;
box-shadow:
0 0 24px -4px rgba(251, 191, 36, .35),
0 0 0 1px rgba(251, 191, 36, .15) inset;
animation: aisHeroTagPulse 3s ease-in-out infinite;
}
@keyframes aisHeroTagPulse {
0%, 100% { box-shadow: 0 0 24px -4px rgba(251, 191, 36, .35), 0 0 0 1px rgba(251, 191, 36, .15) inset; }
50% { box-shadow: 0 0 36px -2px rgba(251, 191, 36, .6), 0 0 0 1px rgba(251, 191, 36, .35) inset; }
}
.ais-hero-tag-inner {
display: inline-block !important;
position: relative;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
}
/* 모바일 */
@media (max-width: 768px) {
.ais-hero-tag.ais-hero-tag-ko { font-size: 14px !important; padding: 7px 18px; }
}
@media (max-width: 480px) {
.ais-hero-tag.ais-hero-tag-ko { font-size: 13px !important; padding: 6px 14px; letter-spacing: -.015em !important; }
}
@media (prefers-reduced-motion: reduce) {
.ais-hero-tag.ais-hero-tag-ko { animation: none; }
}
/* ── "AI 전문" 강조 — 다크 챕터 위 시안 글로우 ── */
.ais-ai-pro {
color: #67e8f9 !important;
font-weight: 900;
letter-spacing: -.01em;
text-shadow:
0 0 12px rgba(103, 232, 249, .55),
0 0 28px rgba(103, 232, 249, .25);
position: relative;
display: inline-block;
padding: 0 4px;
}
.ais-ai-pro::before {
content: '';
position: absolute;
inset: -2px -4px;
background: linear-gradient(135deg, rgba(103, 232, 249, .12), rgba(167, 139, 250, .12));
border-radius: 6px;
z-index: -1;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 신청 CTA 큰 버튼 (ais_support 끝부분) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ais-apply-cta {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
margin: 40px 0 0 !important;
padding: 32px 44px !important;
background: linear-gradient(110deg,
#fbbf24 0%, #fcd34d 25%, #fef3c7 50%, #fcd34d 75%, #fbbf24 100%);
background-size: 250% 100%;
background-position: 0% 50%;
color: #0f172a !important;
text-decoration: none !important;
border-radius: 18px;
font-weight: 800;
letter-spacing: -.01em;
box-shadow:
0 18px 50px -12px rgba(251, 191, 36, .55),
0 0 0 1px rgba(245, 158, 11, .35) inset;
transition: transform .3s, box-shadow .3s, background-position 1.5s ease;
position: relative;
overflow: hidden;
animation: aisApplyShine 4s ease-in-out infinite;
}
@keyframes aisApplyShine {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.ais-apply-cta:hover {
transform: translateY(-4px) !important;
box-shadow:
0 28px 60px -10px rgba(251, 191, 36, .75),
0 0 0 1px rgba(245, 158, 11, .55) inset;
}
.ais-apply-cta-tag {
flex-shrink: 0;
font-family: 'JetBrains Mono', 'Pretendard Variable', monospace !important;
font-size: 12px !important;
font-weight: 800;
letter-spacing: .15em !important;
background: rgba(15, 23, 42, .85);
color: #fbbf24;
padding: 7px 14px;
border-radius: 999px;
text-transform: uppercase;
}
.ais-apply-cta-text {
flex: 1;
font-size: clamp(20px, 2.6vw, 30px) !important;
font-weight: 800;
text-align: center;
line-height: 1.4;
color: #1f2937;
}
.ais-apply-cta-text strong {
color: #b91c1c; /* 빨강 강조 — "AI 검색 노출" */
font-weight: 900;
}
.ais-apply-cta-text em {
font-style: normal;
color: #ffffff;
background: #1f2937;
padding: 3px 14px;
border-radius: 8px;
margin-left: 6px;
font-weight: 800;
}
.ais-apply-cta-arrow {
flex-shrink: 0;
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: rgba(15, 23, 42, .9);
color: #fbbf24;
border-radius: 50%;
transition: transform .3s, background .3s;
}
.ais-apply-cta:hover .ais-apply-cta-arrow {
transform: translateX(8px) rotate(-8deg);
background: #0f172a;
}
.ais-mb-br { display: none; } /* PC 에서는 미사용 */
/* ── 신청 CTA — 2줄 가운데 정렬 변형 ── */
.ais-apply-cta-center {
justify-content: center !important;
text-align: center;
padding: 28px 36px !important;
}
.ais-apply-cta-center .ais-apply-cta-text {
flex: none !important;
width: 100%;
text-align: center;
font-size: 21px !important;
font-weight: 800 !important;
line-height: 1.55;
letter-spacing: -.005em;
color: #1f2937;
}
.ais-apply-cta-line {
display: block !important;
font-size: 21px !important;
font-weight: 800;
letter-spacing: -.005em;
}
.ais-apply-cta-line + .ais-apply-cta-line { margin-top: 6px; }
/* "AI" — 빨강 강조 */
.ais-apply-cta-line strong {
color: #b91c1c !important;
font-weight: 900 !important;
font-size: 1.05em !important;
letter-spacing: -.01em !important;
}
/* '교습소', '필수' — 다크 알약 강조 */
.ais-apply-cta-line em {
font-style: normal !important;
color: #fbbf24 !important;
background: #0f172a;
padding: 2px 10px !important;
border-radius: 6px;
margin: 0 2px;
font-weight: 800 !important;
letter-spacing: -.005em !important;
}
@media (max-width: 768px) {
.ais-apply-cta-center { padding: 24px 18px !important; }
.ais-apply-cta-center .ais-apply-cta-text,
.ais-apply-cta-line { font-size: 16px !important; }
.ais-apply-cta-line strong { font-size: 1.05em !important; }
.ais-apply-cta-line em { padding: 1px 7px !important; }
}
@media (max-width: 480px) {
.ais-apply-cta-center .ais-apply-cta-text,
.ais-apply-cta-line { font-size: 15px !important; }
}
@media (max-width: 768px) {
.ais-apply-cta {
flex-direction: column;
padding: 26px 22px !important;
gap: 16px;
}
.ais-apply-cta-text { font-size: 18px !important; }
.ais-apply-cta-arrow { width: 48px; height: 48px; }
.ais-apply-cta-arrow svg { width: 32px; height: 32px; }
.ais-mb-br { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
.ais-apply-cta { animation: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* /page/ai_apply — 신청 페이지 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* HERO */
.ais-apply-hero {
position: relative;
background: linear-gradient(180deg, var(--ais-cosmic-1) 0%, var(--ais-cosmic-2) 60%, var(--ais-cosmic-3) 100%);
color: #fff;
padding: 90px 0 80px;
overflow: hidden;
isolation: isolate;
}
.ais-apply-hero-bg {
position: absolute; inset: 0; pointer-events: none;
}
.ais-apply-hero-bg svg { width: 100%; height: 100%; display: block; }
.ais-apply-hero-inner {
position: relative; z-index: 2;
text-align: center;
}
.ais-apply-hero > .container {
padding-left: 15%; padding-right: 15%;
max-width: none;
}
.ais-apply-hero-tag {
display: inline-block;
font-family: 'JetBrains Mono', monospace !important;
font-size: 12px !important;
font-weight: 700;
letter-spacing: .25em !important;
color: #fbbf24;
padding: 6px 16px;
border: 1px solid rgba(251, 191, 36, .4);
border-radius: 999px;
margin-bottom: 22px;
text-transform: uppercase;
}
.ais-apply-hero-title {
font-size: clamp(28px, 4.5vw, 50px);
font-weight: 800;
line-height: 1.25;
letter-spacing: -.02em;
margin: 0 0 22px;
color: #fff;
}
.ais-apply-hero-title .ais-em-y {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.05em !important;
}
.ais-apply-hero-title .ais-em-y2 {
color: #67e8f9;
text-shadow: 0 0 18px rgba(103, 232, 249, .55);
font-size: 1.05em !important;
}
.ais-apply-hero-desc {
font-size: clamp(15px, 1.8vw, 19px);
line-height: 1.8;
color: rgba(255, 255, 255, .82);
margin: 0;
}
.ais-apply-hero-desc strong { color: #fff; font-weight: 800; }
.ais-apply-hero-desc em {
font-style: normal;
color: #fbbf24;
font-weight: 800;
background: rgba(251, 191, 36, .12);
padding: 2px 8px;
border-radius: 4px;
}
/* FORM SECTION */
.ais-apply-form-section {
background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
padding: 80px 0 100px;
}
.ais-apply-form-section > .container {
padding-left: 15%; padding-right: 15%;
max-width: none;
}
.ais-apply-card {
background: #fff;
border-radius: 24px;
padding: 48px 56px;
box-shadow: 0 30px 80px -30px rgba(15, 23, 42, .18);
border: 1px solid #e2e8f0;
position: relative;
}
.ais-apply-card-head {
text-align: center;
margin-bottom: 36px;
padding-bottom: 28px;
border-bottom: 1px solid #f1f5f9;
}
.ais-apply-step {
display: inline-block;
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
font-weight: 800;
letter-spacing: .25em !important;
color: #fff;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
padding: 5px 14px;
border-radius: 999px;
margin-bottom: 14px;
}
.ais-apply-card-title {
font-size: clamp(22px, 3vw, 32px);
font-weight: 800;
color: #0f172a;
margin: 0 0 12px;
letter-spacing: -.02em;
}
.ais-apply-card-sub {
font-size: 16px;
line-height: 1.7;
color: #64748b;
margin: 0;
}
.ais-apply-card-sub strong { color: #b91c1c; font-weight: 700; }
/* FORM FIELDS */
.ais-apply-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.ais-apply-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.ais-apply-field label {
font-size: 14px !important;
font-weight: 700;
color: #1e293b;
letter-spacing: -.005em;
}
.ais-apply-req {
color: #ef4444 !important;
margin-left: 2px;
font-weight: 800;
font-size: 14px !important;
}
.ais-apply-field input {
width: 100%;
height: 56px;
padding: 0 18px;
font-size: 16px !important;
font-weight: 500;
color: #0f172a;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 12px;
transition: border-color .2s, background .2s, box-shadow .2s;
font-family: inherit;
}
.ais-apply-field input:focus {
outline: none;
border-color: #6366f1;
background: #fff;
box-shadow: 0 0 0 4px rgba(99, 102, 241, .1);
}
.ais-apply-field input::placeholder { color: #cbd5e1; }
/* RESULT BOX */
.ais-apply-result {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
margin-top: 8px;
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 2px solid #fca5a5;
border-radius: 12px;
animation: aisResultIn .4s ease-out;
}
@keyframes aisResultIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.ais-apply-result-icon {
flex-shrink: 0;
color: #dc2626;
}
.ais-apply-result-text strong {
display: block;
font-size: 17px !important;
font-weight: 800;
color: #991b1b;
margin-bottom: 4px;
}
.ais-apply-result-text span {
display: block;
font-size: 14px !important;
color: #7f1d1d;
line-height: 1.6;
}
/* ACTION BUTTONS */
.ais-apply-actions {
display: flex;
gap: 12px;
margin-top: 12px;
flex-wrap: wrap;
}
.ais-apply-check-btn {
flex: 1 1 280px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 60px;
padding: 0 28px;
font-size: 16px;
font-weight: 800;
background: linear-gradient(135deg, #1e3a8a 0%, #6366f1 100%);
color: #fff;
border: 0;
border-radius: 12px;
cursor: pointer;
letter-spacing: -.01em;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 12px 30px -8px rgba(99, 102, 241, .5);
}
.ais-apply-check-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 36px -6px rgba(99, 102, 241, .65);
}
.ais-apply-check-btn:active { transform: translateY(0); }
.ais-apply-join-btn {
flex: 1 1 280px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 60px;
padding: 0 28px;
font-size: 16px;
font-weight: 800;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #0f172a;
border: 0;
border-radius: 12px;
text-decoration: none;
letter-spacing: -.01em;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 12px 30px -8px rgba(251, 191, 36, .55);
animation: aisJoinPulse 2s ease-in-out infinite;
}
.ais-apply-join-btn:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px -6px rgba(251, 191, 36, .75);
}
@keyframes aisJoinPulse {
0%, 100% { box-shadow: 0 12px 30px -8px rgba(251, 191, 36, .55); }
50% { box-shadow: 0 12px 30px -8px rgba(251, 191, 36, .85); }
}
.ais-apply-note {
margin: 28px 0 0;
padding: 18px 22px;
background: #f8fafc;
border-left: 3px solid #cbd5e1;
border-radius: 6px;
font-size: 13px !important;
line-height: 1.75;
color: #64748b;
}
.ais-apply-note strong { color: #1e293b; font-weight: 700; }
.ais-apply-note a { color: #1e3a8a; font-weight: 700; }
/* MOBILE */
@media (max-width: 768px) {
.ais-apply-hero { padding: 60px 0 50px; }
.ais-apply-hero > .container { padding-left: 5%; padding-right: 5%; }
.ais-apply-form-section { padding: 50px 0 70px; }
.ais-apply-form-section > .container { padding-left: 5%; padding-right: 5%; }
.ais-apply-card { padding: 32px 22px; border-radius: 18px; }
.ais-apply-card-head { margin-bottom: 28px; padding-bottom: 22px; }
.ais-apply-field input { height: 50px; font-size: 16px !important; padding: 0 14px; }
.ais-apply-check-btn,
.ais-apply-join-btn { height: 54px; font-size: 15px; flex: 1 1 100%; }
}
@media (max-width: 480px) {
.ais-apply-card { padding: 26px 18px; }
.ais-apply-result { padding: 16px 18px; gap: 12px; }
}
/* ── 빨간 강조 — 다문화 가정 학부모 등 ── */
.ais-red-em {
color: #dc2626 !important;
font-weight: 700;
background: linear-gradient(transparent 65%, rgba(252, 165, 165, .35) 65%);
padding: 0 2px;
}
/* ── 강조: 인접 글자보다 +2px 키움 (글로벌 룰 무력화 후) ── */
.ais-emph-bigger {
font-size: calc(1em + 2px) !important;
letter-spacing: -.012em;
}
@media (min-width: 769px) {
/* PC 큰 타이틀에서는 +4px 까지 — 시각적 차이 확보 */
.ais-hero-title .ais-emph-bigger,
.ais-chap-title .ais-emph-bigger { font-size: calc(1em + 4px) !important; }
}
/* ── "4가지 지원 패키지" — 큰 + 반짝 ── */
.ais-pkg-big {
display: inline-block;
font-size: 1.18em !important; /* 글로벌 18px 룰 무력화 */
font-weight: 800;
letter-spacing: -.02em;
position: relative;
padding: 0 4px;
}
.ais-sparkle {
background: linear-gradient(110deg,
#fbbf24 0%, #fde68a 28%, #ffffff 48%, #fde68a 68%, #fbbf24 100%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: aisShine 3.5s linear infinite;
text-shadow: 0 0 30px rgba(251, 191, 36, .35);
}
@keyframes aisShine {
0% { background-position: 250% 50%; }
100% { background-position: -250% 50%; }
}
/* 반짝거리는 별 효과 */
.ais-sparkle::before,
.ais-sparkle::after {
content: '✦';
position: absolute;
font-size: 0.45em;
color: #fde68a;
text-shadow: 0 0 8px #fbbf24;
-webkit-text-fill-color: #fde68a;
animation: aisSparkleStar 2.4s ease-in-out infinite;
pointer-events: none;
}
.ais-sparkle::before { top: -8px; left: -10px; }
.ais-sparkle::after { bottom: -4px; right: -6px; animation-delay: 1.2s; }
@keyframes aisSparkleStar {
0%, 100% { opacity: 0; transform: scale(.6) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
/* ── 다문화 사회 노트 (Chapter 02 끝부분) ── */
.ais-multilingual-note {
max-width: 760px;
margin: 36px auto 0;
padding: 26px 32px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid var(--ais-gold);
border-radius: 16px;
text-align: center;
position: relative;
box-shadow: 0 18px 40px -16px rgba(251, 191, 36, .35);
}
.ais-multilingual-tag {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-weight: 800;
letter-spacing: .25em;
color: #b45309;
background: rgba(255, 255, 255, .65);
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 14px;
text-transform: uppercase;
}
.ais-multilingual-note p {
margin: 0;
font-size: 19px;
font-weight: 600;
color: #78350f;
line-height: 1.7;
}
.ais-multilingual-note p strong { color: #92400e; font-weight: 800; }
.ais-multilingual-note p em {
display: inline-block;
padding: 2px 10px;
margin-left: 4px;
background: #92400e;
color: #fff;
border-radius: 6px;
font-style: normal;
font-weight: 800;
letter-spacing: .04em;
}
/* ── 회비 정보 박스 (Chapter 04 / 정회원 한정) ── */
.ais-fee-info {
margin-top: 22px;
padding: 18px 24px;
background: rgba(255, 255, 255, .9);
border: 2px solid var(--ais-gold-d);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
box-shadow: 0 8px 22px -10px rgba(180, 83, 9, .25);
}
.ais-fee-label {
font-size: 15px;
font-weight: 700;
color: #92400e;
letter-spacing: -.005em;
}
.ais-fee-amt {
font-size: 22px;
font-weight: 800;
color: #b45309;
letter-spacing: -.015em;
font-variant-numeric: tabular-nums;
}
.ais-fee-amt em {
display: inline-block;
margin: 0 8px;
padding: 2px 8px;
background: #fef3c7;
border-radius: 4px;
font-size: 13px;
font-style: normal;
font-weight: 700;
color: #d97706;
letter-spacing: .02em;
vertical-align: middle;
}
/* ── "협약체결" 태그 — 일반 폰트체 (Pretendard) ── */
.ais-pricing-tag-plain {
font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
padding: 7px 16px !important;
}
/* ── "25만원 비용으로 끝!" 강조 ── */
.ais-pricing-final {
display: inline-block;
font-weight: 800;
letter-spacing: -.01em;
position: relative;
}
.ais-pricing-final::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 8px;
background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, .5) 50%, transparent 100%);
z-index: -1;
border-radius: 4px;
}
/* ── PC 가독성: 챕터 마무리 단락 줄간 여백 ── */
@media (min-width: 769px) {
.ais-chap-tail br { display: block; content: ''; margin-top: 8px; }
.ais-story-body { margin-bottom: 22px; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━ */
/* 모바일 최적화 (≤768px) */
/* ━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
/* 좌우 여백을 5% 로 축소 */
.ais-hero > .container,
.ais-chap > .container,
.ais-callout-section > .container,
.ais-cta-section > .container {
padding-left: 5%;
padding-right: 5%;
}
/* 모바일 본문 16px (요청: 최소 16px) */
.ais-hero,
.ais-chap,
.ais-callout-section,
.ais-cta-section { font-size: 16px; }
.ais-story-body,
.ais-pack-desc,
.ais-bubble,
.ais-callout-points li,
.ais-callout-summary,
.ais-condition-desc,
.ais-cta-sub,
.ais-hero-sub { font-size: 16px; line-height: 1.75; }
/* 다국어 노트 */
.ais-multilingual-note { padding: 20px 18px; margin-top: 30px; }
.ais-multilingual-note p { font-size: 16px; }
.ais-multilingual-tag { font-size: 10px; }
/* 회비 박스 */
.ais-fee-info {
flex-direction: column;
align-items: flex-start;
padding: 16px 18px;
gap: 6px;
}
.ais-fee-label { font-size: 13px; }
.ais-fee-amt { font-size: 19px; }
.ais-fee-amt em { font-size: 12px; margin: 0 4px; padding: 1px 6px; }
/* 4가지 지원 패키지 */
.ais-pkg-big { font-size: 1.1em; }
.ais-sparkle::before, .ais-sparkle::after { font-size: 0.5em; }
/* 강조어 +2px → 모바일은 +1px 정도로 절제 */
.ais-hero-title .ais-emph-bigger,
.ais-chap-title .ais-emph-bigger { font-size: calc(1em + 2px) !important; }
/* 25만원 강조 — 줄바꿈 친화 */
.ais-pricing-final { display: inline-block; }
/* 협약체결 태그 */
.ais-pricing-tag-plain { font-size: 13px !important; padding: 6px 14px !important; }
/* 챕터 마무리 — 모바일은 줄간 여백 축소 */
.ais-chap-tail { font-size: 17px; line-height: 1.7; }
}
@media (max-width: 420px) {
/* 매우 좁은 화면에서는 좌우 16px 고정 */
.ais-hero > .container,
.ais-chap > .container,
.ais-callout-section > .container,
.ais-cta-section > .container {
padding-left: 16px;
padding-right: 16px;
}
.ais-pkg-big { font-size: 1em; }
}
/* 접근성: 모션 감소 */
@media (prefers-reduced-motion: reduce) {
.ais-sparkle { animation: none; }
.ais-sparkle::before, .ais-sparkle::after { animation: none; opacity: .8; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* /member/join — 모바일 종합 최적화 (iPhone / Galaxy 등 모두) */
/* · iOS 자동 줌 방지 (모든 입력 ≥ 16px) */
/* · iPhone notch / home indicator safe-area-inset 대응 */
/* · 터치 타겟 ≥ 44px */
/* · 키보드 inputmode·enterkeyhint 호환 */
/* · 고정 헤더와 카드 겹침 방지 (scroll-margin-top) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* iOS 자동 줌 방지 — 정회원 확인 박스 입력 (기존 15px → 16px) */
@media (max-width: 768px) {
.join-mcheck-input {
height: 52px;
font-size: 16px !important; /* ★ iOS 자동 줌 차단 (16px 이상) */
padding: 0 16px;
border-radius: 12px;
}
.join-mcheck-btn {
height: 56px; /* ★ 터치 타겟 ≥ 44px (충분히 큼) */
font-size: 17px;
border-radius: 12px;
width: 100%;
margin-top: 4px;
}
.join-mcheck-card {
padding: 26px 18px !important;
}
.join-mcheck-form { gap: 10px; }
}
/* 본 폼 입력 — 16px 이상 보장 (iOS 줌 차단) — 이미 17px이라 OK 이지만 명시 */
@media (max-width: 768px) {
.join-input {
font-size: 17px !important; /* iOS 줌 차단 */
-webkit-appearance: none; /* iOS 기본 스타일 제거 */
appearance: none;
}
/* select 기본 화살표 복구 */
select.join-input {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 42px;
}
}
/* 라디오 버튼 — 터치 타겟 충분히 크게 (현재 OK 이지만 모바일 명시) */
@media (max-width: 768px) {
.join-priv-radio {
min-height: 48px; /* 터치 타겟 */
padding: 6px 4px;
}
.join-priv-radio input {
width: 24px; height: 24px; /* 작은 native radio 크게 */
accent-color: #b45309;
}
.join-priv-mark {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px !important;
}
}
/* 계좌 복사 버튼 — 터치 타겟 보강 */
@media (max-width: 768px) {
.acc-copy {
min-height: 40px;
min-width: 56px;
padding: 8px 14px !important;
font-size: 14px;
border-radius: 8px;
}
.join-acc-list li {
padding: 14px !important;
align-items: center;
}
.acc-num {
font-size: 15px !important;
word-break: break-all;
line-height: 1.4;
}
}
/* 가입 신청·취소 버튼 — 풀 너비 + 충분한 높이 */
@media (max-width: 768px) {
.join-actions {
flex-direction: column !important;
gap: 12px !important;
}
.join-btn {
width: 100%;
min-height: 56px;
font-size: 17px !important;
padding: 16px !important;
letter-spacing: -.005em;
}
.join-btn-primary {
box-shadow: 0 8px 24px -8px rgba(30, 58, 138, .45);
}
}
/* iPhone notch / home indicator safe-area-inset 대응 */
@supports (padding: max(0px)) {
.join-section {
padding-bottom: max(60px, calc(60px + env(safe-area-inset-bottom)));
}
@media (max-width: 768px) {
.join-section {
padding-bottom: max(50px, calc(50px + env(safe-area-inset-bottom)));
}
}
}
/* 고정 헤더 아래 가려짐 방지 — 카드 스크롤 시 여유 */
.join-card {
scroll-margin-top: 80px;
}
@media (max-width: 768px) {
.join-card { scroll-margin-top: 64px; }
}
/* 매우 작은 화면 (≤360px) — iPhone SE 등 */
@media (max-width: 360px) {
.join-section { padding-top: 16px; }
.join-card { padding: 16px 12px !important; margin-bottom: 14px !important; }
.join-title { font-size: 19px !important; }
.join-subtitle { font-size: 13px !important; }
.join-card-title { font-size: 16px !important; }
.join-mcheck-title { font-size: 20px !important; }
.join-mcheck-sub { font-size: 13px !important; }
.join-greeting p, .join-ai-body p, .join-ai-bullets li,
.join-priv-row p, .join-priv-question, .join-priv-mark { font-size: 15px !important; }
.join-input { padding: 12px 12px !important; min-height: 46px; font-size: 16px !important; }
.join-btn { font-size: 16px !important; min-height: 50px; }
.join-fee-value strong { font-size: 20px !important; }
/* 계좌 — 매우 작은 폰에서 라벨 위, 번호 아래로 스택 */
.join-acc-list li {
grid-template-columns: 1fr auto !important;
grid-template-areas:
"bank copy"
"num num";
gap: 6px 10px !important;
padding: 12px !important;
}
.acc-bank { grid-area: bank; font-size: 13px !important; }
.acc-num { grid-area: num; font-size: 14px !important; }
.acc-copy { grid-area: copy; }
}
/* 모바일 가로 모드 (landscape) — height 짧을 때 헤더/푸터 압박 완화 */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
.join-section { padding: 24px 0 50px; }
.join-head { margin-bottom: 24px; }
.join-card { margin-bottom: 14px; }
}
/* 입력 필드 자동 채움(autofill) 시 노란 배경 제거 (iOS/Chrome) */
.join-input:-webkit-autofill,
.join-mcheck-input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px #fff inset !important;
-webkit-text-fill-color: #1e293b !important;
caret-color: #1e293b;
}
.join-mcheck-input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px #fffbeb inset !important;
}
/* 터치 디바이스에서 hover 효과 잔상 제거 */
@media (hover: none) {
.join-btn:hover { transform: none; box-shadow: none; }
.join-mcheck-btn:hover { transform: none; }
.acc-copy:hover { transform: none; }
}
/* 모바일 사이드 여백 — container 의 좁은 패딩 보강 */
@media (max-width: 768px) {
.join-section .container {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
@media (max-width: 420px) {
.join-section .container {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ★ 전 페이지 모바일 종합 하드닝 (iPhone / Galaxy / 태블릿) */
/* · 관리자 페이지 (.adm-*) 는 영향 받지 않음 (적용 범위 한정) */
/* · 법정연수 재생 로직 / CSP / 인증은 건드리지 않음 */
/* · 모든 변경은 추가만 — 기존 규칙은 그대로 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── 1) iOS 입력 자동 줌 차단 강화 ── */
/* 글로벌 input 룰 (18px) 외에, 누락된 일부 type 도 16px 보장 */
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
font-size: 18px;
line-height: 1.5;
}
@media (max-width: 768px) {
/* 모바일에서도 16px 이상 (iOS 줌 차단 마지노선) */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
select, textarea {
font-size: 16px !important;
}
/* PC에서 18px 이상이던 본 폼 / 게시판 입력은 그대로 유지 */
.join-input, .bd-input, .tp-name-input,
.reg-form input, .te-input, .cv-input {
font-size: 17px !important;
}
}
/* ── 2) iPhone 홈 인디케이터 safe-area-inset 보호 (가로 노치는 컨테이너에서) ── */
@supports (padding: max(0px)) {
/* body 좌우 safe-area 는 가로모드 노치 영역 — body 직접 패딩은 레이아웃 시프트 위험,
대신 .container 류에 추가 padding 으로 보강 (모바일 세로/가로 모두 안전) */
@media (max-width: 768px) and (orientation: landscape) {
.site-main > section > .container,
.site-main > .container {
padding-left: max(14px, env(safe-area-inset-left)) !important;
padding-right: max(14px, env(safe-area-inset-right)) !important;
}
}
/* 하단 — 홈 인디케이터(검은 줄) 영역만큼 본문 끝에 여유 */
.site-main {
padding-bottom: env(safe-area-inset-bottom);
}
/* 푸터 자체에도 — 푸터 안쪽이 홈 인디케이터에 가리지 않도록 */
.site-footer {
padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
}
}
/* ── 3) 터치 디바이스 — 회색 탭 하이라이트 제거 + 300ms 지연 제거 ── */
a, button, [role="button"], summary,
input[type="submit"], input[type="button"],
.bd-btn, .ais-btn, .join-btn, .te-btn-primary,
.cv-btn, .reg-btn, .tl-card-btn,
.tp-back, .tp-next-btn, .tp-resume-reset,
.acc-copy, .gnb a, .gnb button,
.mobile-menu a, .hamburger, .mobile-close {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-action: manipulation;
}
/* ── 4) 호버 효과 — 터치 디바이스에서는 비활성 (잔상 제거) ── */
@media (hover: none) {
.bd-btn:hover, .ais-btn:hover, .join-btn:hover,
.te-btn-primary:hover, .cv-btn:hover, .reg-btn:hover,
.tl-card-btn:hover, .tp-next-btn:hover,
.biz-card:hover, .gal-card:hover, .gal-link:hover,
.ais-pack:hover, .ais-reality-item:hover,
.ais-apply-cta:hover, .ais-apply-check-btn:hover, .ais-apply-join-btn:hover {
transform: none !important;
box-shadow: inherit;
}
/* hover로만 보이는 메가메뉴 → 모바일은 .mobile-menu 사용하므로 무관 */
}
/* ── 5) 긴 URL/단어 — 모바일 가로 오버플로우 방지 ── */
@media (max-width: 768px) {
.bd-post-content,
.gr-section, .hist-section,
.ais-callout-section, .ais-chap,
.join-greeting, .join-ai-body, .join-priv-row,
.te-content, .cv-content {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* URL/이메일 등 긴 인라인 텍스트는 자동 줄바꿈 */
.bd-post-content a, .bd-post-content code,
.ais-callout a, .te-content a {
word-break: break-all;
}
}
/* ── 6) 법정연수 (training-play) — 모바일 보강 (기존 풀블리드 룰은 유지) ── */
/* ※ .tp-player-wrap 의 풀블리드 -16px 마진 룰은 이미 라인 2942 에 있음 */
@media (max-width: 768px) {
/* 비디오 그림자만 강화 — 기존 mobile 룰을 덮어쓰지 않음 */
.tp-player-wrap { box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
}
/* iOS Safari — video 컨트롤 모바일에서도 잘 보이게 (잠재 문제 예방) */
.tp-player-wrap video::-webkit-media-controls-panel {
display: flex !important;
}
/* ── 7) 게시판 — 모바일 카드형 미세 보강 ── */
@media (max-width: 768px) {
/* 게시판 본문 (view) — 코드/표 가로 스크롤 처리 */
.bd-post-content table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.bd-post-content img,
.bd-post-content video,
.bd-post-content iframe {
max-width: 100% !important;
height: auto !important;
}
.bd-post-content pre, .bd-post-content code {
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
/* 댓글 폼 textarea — iOS 줌 차단 */
.bd-cmt-form textarea { font-size: 16px !important; }
}
/* ── 8) 메인 헤더 / 모바일 메뉴 — 터치 친화 ── */
@media (max-width: 768px) {
/* 햄버거 버튼 터치 타겟 ≥ 44px */
.hamburger { min-width: 44px; min-height: 44px; }
/* 모바일 메뉴 닫기 버튼 */
.mobile-menu .close { min-width: 44px; min-height: 44px; }
/* 로고 영역 — 작은 화면에서 텍스트 자동 축소 */
.brand-text { letter-spacing: -.02em; }
}
@media (max-width: 380px) {
/* iPhone SE 등 — 로고 텍스트 일부 축약 */
.brand-text { font-size: 14px !important; }
.brand-mark-img { height: 32px !important; }
}
/* ── 9) 페이지 (인사말 / 연혁 / AI 지원) — 작은 폰 추가 보호 ── */
@media (max-width: 380px) {
.gr-section, .hist-section,
.ais-chap, .ais-callout-section, .ais-cta-section, .ais-apply-form-section {
padding-left: 0;
padding-right: 0;
}
.gr-section .container, .hist-section .container,
.ais-chap > .container, .ais-callout-section > .container,
.ais-cta-section > .container, .ais-apply-form-section > .container,
.ais-hero > .container, .ais-apply-hero > .container,
.ais-bridge > .container {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* ── 10) 회원가입 / 폼 페이지 — autofill 일관성 ── */
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
transition: background-color 9999s ease-in-out 0s !important;
}
/* ── 11) 스크롤바 (데스크톱 한정 미세 디자인 / 모바일은 OS 기본) ── */
@media (min-width: 769px) {
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
}
/* ── 12) 가로 스크롤 차단 — body 레벨 (안전망) ──
★ 중요: overflow-x: hidden 은 position: sticky 를 깨뜨리므로 사용 금지.
대신 overflow-x: clip 을 사용 (sticky 정상 작동, 모던 브라우저 96%+ 지원) */
html, body { max-width: 100%; }
body { overflow-x: clip; }
/* clip 미지원 구형 브라우저는 가로 스크롤 허용 (sticky 헤더 우선 보존) */
/* ── 13) iOS 폰트 부드럽게 + 한글 자동 줄바꿈 균형 ── */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-break: keep-all; /* 한글 단어 단위 줄바꿈 (어절 보존) */
overflow-wrap: break-word;
}
/* ── 14) 폼 select 화살표 — iOS Safari 검은 화살표 보강 ── */
@media (max-width: 768px) {
select:not([multiple]) {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 42px;
}
}
/* ── 15) /page/* 컨테이너 — 작은 폰에서 좌우 패딩 보강 ── */
@media (max-width: 380px) {
body main > .container {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* ── 16) 모달/오버레이 (이미 있다면) — 모바일 세이프 ── */
.modal, .overlay, [role="dialog"] {
max-height: 100dvh; /* 동적 viewport — iOS Safari 주소창 대응 */
max-height: 100vh; /* fallback */
overscroll-behavior: contain;
}
/* ── 17) 갤러리 / 사진 — 모바일에서 풀폭 보장 ── */
@media (max-width: 768px) {
.gal-thumb img, .bd-photo-cell img {
max-width: 100%;
height: auto;
}
}
/* ── 18) 법정연수 페이지 모바일 — 인증서 카드 / 진행률 ── */
@media (max-width: 480px) {
.tp-completed-banner,
.tp-resume {
padding: 14px 16px !important;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.tp-completed-actions,
.tp-resume-actions {
width: 100%;
flex-direction: column;
gap: 8px;
}
.tp-next-btn,
.tp-resume-reset {
width: 100%;
text-align: center;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ── 19) 인쇄 시 (수료증 등) — 안전망 ── */
@media print {
.site-header, .site-footer, .mobile-menu,
.sub-crumb-bar, .ais-apply-cta, .ais-cta-section,
.gnb, .actions { display: none !important; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ★ 모바일 추가 보강 (2026-05-11) — 법정연수 시청 UX 개선 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── 20) 스크롤 앵커 보정 — sticky 헤더가 가리지 않도록 ── */
:root { --header-h: 80px; }
@media (max-width: 768px) {
:root { --header-h: 64px; }
}
h1[id], h2[id], h3[id], h4[id],
section[id], article[id], aside[id], nav[id] {
scroll-margin-top: calc(var(--header-h) + 12px);
}
/* ── 21) 이수증 미리보기 iframe — 모바일에서 작아 보이는 문제 ── */
@media (max-width: 768px) {
.cv-preview-wrap {
aspect-ratio: auto;
height: auto;
}
.cv-preview {
width: 100%;
min-height: 480px;
height: 70vh;
height: 70dvh;
}
.cv-preview-wrap::after {
content: '🔍 인쇄/PDF 버튼을 누르면 큰 화면으로 확인할 수 있습니다';
display: block;
text-align: center;
background: #fef3c7;
color: #78350f;
padding: 12px;
font-size: 14px;
border-top: 1px solid #fde68a;
line-height: 1.5;
word-break: keep-all;
}
}
/* ── 22) 회원 검색 결과 (te-result-item) — 모바일 가독성 ── */
@media (max-width: 768px) {
.te-result-item {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"office"
"inst"
"name";
gap: 6px;
align-items: start;
}
.te-result-office { grid-area: office; justify-self: start; font-size: 12px; }
.te-result-inst { grid-area: inst; font-size: 17px; font-weight: 700; line-height: 1.4; }
.te-result-name { grid-area: name; justify-self: start; font-size: 13px; color: #64748b; font-weight: 500; }
}
/* ── 23) 블로그 언어 핀 — 10개가 모바일에서 줄바꿈 폭주 차단 ── */
@media (max-width: 768px) {
.bhero-langs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 8px 4px 12px;
margin: 0 -16px;
padding-left: 16px;
padding-right: 16px;
/* 스크롤바 숨김 (시각 노이즈 제거) */
scrollbar-width: none;
}
.bhero-langs::-webkit-scrollbar { display: none; }
.bhero-lang {
flex: 0 0 auto;
scroll-snap-align: start;
}
}
/* ── 24) Hero 동적 뷰포트 — iOS Safari 주소창 변화 시 흔들림 방지 ── */
.swiper-slide-hero,
.hero-slider {
/* fallback: 86vh, 지원 브라우저: 86dvh */
}
@supports (height: 86dvh) {
.hero-slider, .swiper {
/* 슬라이드 컨테이너가 vh 쓰면 여기서 dvh 보강 */
}
}
/* ── 25) 가로모드 (landscape) 시 모바일 hero 압축 — UI 가독성 ── */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 500px) {
.hero-slider, .swiper-slide-hero {
min-height: 380px;
}
}
/* ── 26) 관리자 페이지 (.adm-*) 모바일 보강 — 외부 출장 승인용 ── */
@media (max-width: 768px) {
/* iOS 자동 줌 차단 (Bootstrap 5 기본 14px → 16px 강제) */
.adm-body input.form-control,
.adm-body select.form-select,
.adm-body textarea.form-control,
.adm-body .form-control-sm,
.adm-body .form-select-sm {
font-size: 16px !important;
}
/* 테이블 가독성 — 12px 기본은 모바일에서 너무 작음 */
.adm-body .adm-table { font-size: 13.5px; }
.adm-body .adm-table thead th { font-size: 11.5px; padding: 10px 6px; }
.adm-body .adm-table tbody td { padding: 12px 6px; line-height: 1.5; }
/* form-row 1열 변환 */
.adm-body .form-row {
grid-template-columns: 1fr !important;
gap: 4px;
padding: 12px 0;
}
/* 진행률 핀 / 통계 핀 줄바꿈 자연화 */
.adm-body .training-status,
.adm-body .member-stat-bar {
padding: 12px;
gap: 8px;
}
.adm-body .training-status .ts-pill {
flex: 1 1 calc(50% - 4px);
min-width: 0;
}
/* 액션 버튼 터치 영역 — Bootstrap 기본 btn-sm 너무 작음 */
.adm-body .btn-sm {
min-height: 36px;
padding: 6px 12px;
}
/* 사이드바 오픈 시 backdrop 표시 */
.adm-body .adm-sidebar.open ~ .adm-main::before,
.adm-body .adm-sidebar.open + .adm-main::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 99;
cursor: pointer;
}
.adm-body .adm-sidebar.open {
z-index: 100;
}
/* 회원 추가 신청 위젯 — 모바일에서 카드 폭 보호 */
.adm-body .pending-table { font-size: 12.5px; }
.adm-body .pending-table td { padding: 8px 5px; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* /page/ai_request — AI 지원 신청 폼 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* HERO 타이틀 사이즈 */
.aireq-title-big {
display: inline-block;
font-size: 36px !important; /* PC 36px */
font-weight: 800 !important;
line-height: 1.4;
color: #fff;
letter-spacing: -.015em;
}
.aireq-title-sub {
display: inline-block;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.7;
color: rgba(255, 255, 255, .82);
margin-top: 16px;
}
.aireq-em {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900 !important;
font-size: 1.08em !important;
}
@media (max-width: 1024px) {
.aireq-title-big { font-size: 30px !important; }
}
@media (max-width: 768px) {
.aireq-title-big { font-size: 22px !important; line-height: 1.4; letter-spacing: -.02em; }
.aireq-title-sub { font-size: 15px !important; }
}
@media (max-width: 420px) {
.aireq-title-big { font-size: 19px !important; }
.aireq-title-sub { font-size: 14px !important; }
}
/* 섹션 컨테이너 */
.aireq-section {
background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
padding: 60px 0 100px;
}
.aireq-section > .container {
padding-left: 15%;
padding-right: 15%;
max-width: none;
}
@media (max-width: 768px) {
.aireq-section { padding: 40px 0 70px; }
.aireq-section > .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 420px) {
.aireq-section > .container { padding-left: 12px; padding-right: 12px; }
}
/* HERO 좌우 패딩 - 모바일에서 컨테이너 좁힘으로 36px 타이틀이 자연스럽게 */
.ais-apply-hero > .container { padding-left: 15%; padding-right: 15%; max-width: none; }
@media (max-width: 1024px) { .ais-apply-hero > .container { padding-left: 8%; padding-right: 8%; } }
@media (max-width: 768px) {
.ais-apply-hero { padding: 50px 0 50px; }
.ais-apply-hero > .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 420px) {
.ais-apply-hero { padding: 40px 0 40px; }
.ais-apply-hero > .container { padding-left: 12px; padding-right: 12px; }
}
.aireq-form { display: flex; flex-direction: column; gap: 22px; }
/* 카드 */
.aireq-card {
background: #fff;
border-radius: 18px;
border: 1px solid #e2e8f0;
padding: 32px 36px;
box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .08);
scroll-margin-top: 80px;
}
@media (max-width: 768px) {
.aireq-card { padding: 22px 18px; border-radius: 14px; scroll-margin-top: 64px; }
}
@media (max-width: 380px) {
.aireq-card { padding: 18px 14px; }
}
.aireq-card-head {
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 2px solid #f1f5f9;
}
.aireq-step {
display: inline-block;
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
font-weight: 800;
letter-spacing: .25em !important;
color: #fff;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
padding: 5px 14px;
border-radius: 999px;
margin-bottom: 12px;
}
.aireq-step-3 { background: linear-gradient(135deg, #b45309, #d97706); }
.aireq-step-4 { background: linear-gradient(135deg, #475569, #64748b); }
.aireq-card-title {
font-size: 22px !important;
font-weight: 800;
color: #0f172a;
margin: 0 0 8px;
letter-spacing: -.01em;
}
.aireq-card-sub {
font-size: 15px !important;
color: #64748b;
margin: 0;
line-height: 1.65;
}
/* STEP 01 — 정회원 확인 그리드 */
.aireq-check-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 14px;
align-items: end;
}
@media (max-width: 1024px) { .aireq-check-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .aireq-check-grid { grid-template-columns: 1fr; } }
.aireq-field { display: flex; flex-direction: column; gap: 6px; }
.aireq-label {
font-size: 14px !important;
font-weight: 700;
color: #1e293b;
letter-spacing: -.005em;
}
.aireq-req { color: #ef4444 !important; }
.aireq-input {
width: 100%;
height: 50px;
padding: 0 16px;
font-size: 16px !important; /* iOS 줌 방지 */
font-weight: 500;
color: #0f172a;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 10px;
transition: border-color .2s, box-shadow .2s, background .2s;
font-family: inherit;
}
.aireq-input:focus {
outline: 0;
border-color: #1e3a8a;
background: #fff;
box-shadow: 0 0 0 4px rgba(30, 58, 138, .12);
}
.aireq-input::placeholder { color: #cbd5e1; }
.aireq-field-action { justify-content: flex-end; }
.aireq-check-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 50px;
padding: 0 22px;
font-size: 16px;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
border: 0;
border-radius: 10px;
cursor: pointer;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 8px 18px -6px rgba(99, 102, 241, .55);
white-space: nowrap;
min-width: 120px;
}
.aireq-check-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(99, 102, 241, .7); }
.aireq-check-btn:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 600px) { .aireq-check-btn { width: 100%; } }
/* 회원 정보 표시 */
.aireq-member-info {
margin-top: 22px;
padding: 22px;
background: #f8fafc;
border-radius: 12px;
border-left: 4px solid #1e3a8a;
}
.aireq-member-status {
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px; flex-wrap: wrap;
}
.aireq-member-badge {
display: inline-flex; align-items: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px !important;
font-weight: 800;
letter-spacing: -.005em;
}
.aireq-member-badge.is-ok { background: #d1fae5; color: #065f46; }
.aireq-member-badge.is-warn { background: #fef3c7; color: #92400e; }
.aireq-member-badge.is-no { background: #fee2e2; color: #991b1b; }
.aireq-member-msg {
font-size: 14px !important;
color: #475569;
font-weight: 500;
flex: 1;
line-height: 1.6;
}
.aireq-member-msg a { color: #1e3a8a; font-weight: 700; text-decoration: underline; }
.aireq-info-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
margin: 0;
}
@media (max-width: 600px) { .aireq-info-list { grid-template-columns: 1fr; } }
.aireq-info-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.aireq-info-row dt { font-size: 13px !important; font-weight: 700; color: #64748b; margin: 0; }
.aireq-info-row dd { font-size: 14px !important; color: #0f172a; font-weight: 500; margin: 0; word-break: break-all; }
/* STEP 02 / 03 — 옵션 리스트 */
.aireq-opt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.aireq-opt {
border: 2px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
transition: border-color .2s, background .2s;
position: relative;
}
.aireq-opt:has(.aireq-opt-chk:checked) {
border-color: #1e3a8a;
background: #eef2ff;
}
.aireq-opt-label {
display: flex; align-items: flex-start; gap: 14px;
padding: 18px 20px;
cursor: pointer;
user-select: none;
}
.aireq-opt-chk { position: absolute; opacity: 0; pointer-events: none; }
.aireq-opt-mark {
flex-shrink: 0;
width: 24px; height: 24px;
border: 2px solid #cbd5e1;
border-radius: 6px;
background: #fff;
position: relative;
transition: background .15s, border-color .15s;
margin-top: 2px;
}
.aireq-opt-chk:checked + .aireq-opt-mark { background: #1e3a8a; border-color: #1e3a8a; }
.aireq-opt-chk:checked + .aireq-opt-mark::after {
content: '';
position: absolute;
left: 7px; top: 3px;
width: 6px; height: 12px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.aireq-opt-chk:focus-visible + .aireq-opt-mark { box-shadow: 0 0 0 3px rgba(30, 58, 138, .25); }
.aireq-opt-body { flex: 1; min-width: 0; }
.aireq-opt-title {
display: block;
font-size: 17px !important;
font-weight: 800;
color: #0f172a;
margin-bottom: 4px;
letter-spacing: -.005em;
}
.aireq-opt-desc { display: block; font-size: 14px !important; color: #64748b; font-style: normal; line-height: 1.6; }
/* 묶음 항목 (체크박스 없이 함께 적용되는 부수 항목) */
.aireq-opt-extra {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed #cbd5e1;
}
.aireq-opt-extra-plus {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
background: #eef2ff;
color: #1e3a8a;
border-radius: 6px;
font-size: 16px !important;
font-weight: 800;
line-height: 1;
}
.aireq-opt:has(.aireq-opt-chk:checked) .aireq-opt-extra-plus {
background: #1e3a8a;
color: #fff;
}
.aireq-opt-extra-body { flex: 1; min-width: 0; }
.aireq-opt-extra-body strong {
display: block;
font-size: 15px !important;
font-weight: 700;
color: #1e293b;
margin-bottom: 3px;
letter-spacing: -.005em;
}
.aireq-opt-extra-body em {
display: block;
font-size: 13px !important;
font-style: normal;
color: #64748b;
line-height: 1.6;
}
@media (max-width: 600px) {
.aireq-opt-extra { gap: 10px; padding-top: 12px; margin-top: 12px; }
.aireq-opt-extra-plus { width: 22px; height: 22px; font-size: 14px !important; }
.aireq-opt-extra-body strong { font-size: 14px !important; }
.aireq-opt-extra-body em { font-size: 12px !important; }
}
/* 박스 우측 하단 강조 가격 (STEP 02) */
.aireq-opt-price-tag {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 10px;
padding: 14px 22px 16px;
background: linear-gradient(90deg, transparent 0%, rgba(185, 28, 28, .04) 100%);
border-top: 1px dashed #e2e8f0;
border-radius: 0 0 10px 10px;
}
.aireq-opt-price-label {
font-size: 13px !important;
font-weight: 700;
color: #64748b;
letter-spacing: -.005em;
}
.aireq-opt-price-value {
font-size: 28px !important;
font-weight: 900;
color: #b91c1c !important;
letter-spacing: -.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.aireq-opt-price-value small {
font-size: 0.62em !important;
font-weight: 700;
margin-left: 2px;
}
/* "협의" 등 텍스트 가격 — 숫자보다 살짝 작게 */
.aireq-opt-price-text {
font-size: 22px !important;
letter-spacing: -.005em !important;
padding: 4px 14px;
background: rgba(185, 28, 28, .08);
border-radius: 8px;
}
@media (max-width: 600px) {
.aireq-opt-price-tag { padding: 12px 18px 14px; gap: 8px; }
.aireq-opt-price-label { font-size: 12px !important; }
.aireq-opt-price-value { font-size: 24px !important; }
.aireq-opt-price-text { font-size: 18px !important; padding: 3px 12px; }
}
/* 짙은 검정 상세 설명 (STEP 03 블로그/영상 옵션) */
.aireq-opt-detail {
display: block;
margin: 12px 0 0;
padding: 12px 14px;
font-size: 14.5px !important;
line-height: 1.75;
color: #1f2937 !important;
font-weight: 500;
font-style: normal;
background: #f8fafc;
border-left: 3px solid #1e3a8a;
border-radius: 4px;
letter-spacing: -.005em;
word-break: keep-all;
}
.aireq-opt-detail strong {
color: #b91c1c;
font-weight: 800;
}
@media (max-width: 768px) {
.aireq-opt-detail {
font-size: 14px !important;
padding: 11px 12px;
line-height: 1.7;
margin-top: 10px;
}
}
@media (max-width: 420px) {
.aireq-opt-detail { font-size: 13.5px !important; padding: 10px 11px; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ai_request — 가독성 강화 (PC 18px 기본 / 16px 최소) */
/* · 모든 본문 / 폼 입력 / 버튼: 18px (PC) */
/* · 라벨 / 보조 텍스트: 16px (PC 최소) */
/* · 모바일은 16px 보장 (iOS 자동 줌 차단) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 769px) {
.aireq-section { font-size: 18px; }
/* 카드 헤더 부가 설명 */
.aireq-card-sub { font-size: 17px !important; line-height: 1.7; }
/* 옵션 카드 — 본문급 */
.aireq-opt-title { font-size: 19px !important; }
.aireq-opt-desc { font-size: 16px !important; }
.aireq-opt-detail { font-size: 17px !important; line-height: 1.8; padding: 14px 18px; }
.aireq-opt-extra-body strong { font-size: 17px !important; }
.aireq-opt-extra-body em { font-size: 16px !important; }
/* 폼 입력 영역 — 큰 글씨 */
.aireq-label { font-size: 16px !important; }
.aireq-input { font-size: 18px !important; height: 56px; padding: 0 18px; }
.aireq-check-btn { font-size: 18px !important; height: 56px; }
.aireq-sub-label { font-size: 16px !important; }
.aireq-sub-input { font-size: 17px !important; padding: 14px 16px; }
/* 회원 정보 표시 */
.aireq-member-msg { font-size: 17px !important; line-height: 1.65; }
.aireq-member-badge { font-size: 14px !important; padding: 7px 16px; }
.aireq-info-row dt { font-size: 14px !important; }
.aireq-info-row dd { font-size: 17px !important; }
/* 개인정보 동의 */
.aireq-priv-row strong { font-size: 16px !important; }
.aireq-priv-row p { font-size: 16px !important; line-height: 1.75; }
.aireq-priv-text { font-size: 17px !important; line-height: 1.55; }
/* 제출 버튼 */
.aireq-btn { font-size: 19px !important; height: 64px; }
/* 가격 태그 — 그대로 (강조) */
/* .aireq-opt-price-value 28px, .aireq-opt-price-text 22px — 유지 */
}
/* 모바일 — iOS 자동 줌 차단 + 가독성 균형 (768px 이하) */
@media (max-width: 768px) {
.aireq-section { font-size: 16px; line-height: 1.7; }
.aireq-card-title { font-size: 19px !important; }
.aireq-card-sub { font-size: 15px !important; line-height: 1.7; }
.aireq-opt-title { font-size: 16px !important; line-height: 1.4; }
.aireq-opt-desc { font-size: 14px !important; }
.aireq-opt-detail { font-size: 15px !important; line-height: 1.7; padding: 12px 14px; }
.aireq-opt-extra-body strong { font-size: 15px !important; }
.aireq-opt-extra-body em { font-size: 13px !important; }
.aireq-label, .aireq-sub-label { font-size: 14px !important; }
.aireq-input,
.aireq-sub-input { font-size: 16px !important; } /* iOS 줌 차단 */
.aireq-member-msg { font-size: 15px !important; line-height: 1.65; }
.aireq-member-badge { font-size: 13px !important; padding: 6px 14px; }
.aireq-info-row dt { font-size: 13px !important; }
.aireq-info-row dd { font-size: 15px !important; }
.aireq-priv-row strong, .aireq-priv-row p { font-size: 14px !important; line-height: 1.7; }
.aireq-priv-text { font-size: 15px !important; }
.aireq-check-btn, .aireq-btn { font-size: 16px !important; }
}
/* 매우 작은 폰 (≤380px — iPhone SE 등) */
@media (max-width: 380px) {
.aireq-card { padding: 18px 14px !important; }
.aireq-card-title { font-size: 17px !important; }
.aireq-opt-title { font-size: 15px !important; }
.aireq-opt-detail { font-size: 14px !important; padding: 11px 12px; }
.aireq-priv-row strong, .aireq-priv-row p { font-size: 13.5px !important; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ais-mind-callout — "명심하십시오!" 경고 강조 박스 */
/* (4가지 패키지 그리드 아래) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ais-mind-callout {
display: flex;
align-items: center;
gap: 32px;
margin: 60px auto 0;
padding: 36px 44px;
background:
radial-gradient(circle at 0% 50%, rgba(251, 191, 36, .15) 0%, transparent 50%),
linear-gradient(135deg, rgba(15, 23, 42, .85) 0%, rgba(30, 41, 59, .9) 100%);
border: 2px solid rgba(251, 191, 36, .55);
border-radius: 20px;
position: relative;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(251, 191, 36, .25) inset,
0 24px 60px -20px rgba(0, 0, 0, .5);
}
.ais-mind-callout::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg,
transparent 0%,
rgba(251, 191, 36, .08) 35%,
rgba(251, 191, 36, .15) 50%,
rgba(251, 191, 36, .08) 65%,
transparent 100%);
background-size: 200% 100%;
animation: aisMindShine 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes aisMindShine {
0%, 100% { background-position: 200% 50%; }
50% { background-position: -100% 50%; }
}
/* 아이콘 */
.ais-mind-icon {
flex-shrink: 0;
width: 96px; height: 96px;
position: relative;
z-index: 1;
}
.ais-mind-icon svg { width: 100%; height: 100%; }
.ais-mind-ring {
transform-origin: 40px 40px;
animation: aisMindSpin 8s linear infinite;
}
@keyframes aisMindSpin { to { transform: rotate(360deg); } }
.ais-mind-tri {
transform-origin: 40px 40px;
animation: aisMindBreath 2s ease-in-out infinite;
}
@keyframes aisMindBreath {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.06); opacity: .85; }
}
.ais-mind-bang, .ais-mind-dot {
animation: aisMindBlink 1.4s ease-in-out infinite;
}
@keyframes aisMindBlink {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
.ais-mind-pulse {
transform-origin: 40px 40px;
animation: aisMindHalo 2s ease-out infinite;
}
@keyframes aisMindHalo {
0% { transform: scale(.85); opacity: .8; }
100% { transform: scale(1.18); opacity: 0; }
}
/* 텍스트 */
.ais-mind-text {
flex: 1;
margin: 0;
font-size: 26px !important;
font-weight: 800;
line-height: 1.55;
color: #fff;
letter-spacing: -.015em;
position: relative;
z-index: 1;
}
.ais-mind-prefix {
display: inline-block;
background: #fbbf24;
color: #0f172a !important;
font-weight: 900 !important;
padding: 4px 14px;
border-radius: 8px;
margin-right: 10px;
font-size: 0.92em !important;
letter-spacing: -.01em;
vertical-align: 2px;
animation: aisMindPrefixPulse 2s ease-in-out infinite;
}
@keyframes aisMindPrefixPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .55); }
50% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); }
}
.ais-mind-text em {
font-style: italic;
color: rgba(255, 255, 255, .92) !important;
background: linear-gradient(transparent 65%, rgba(239, 68, 68, .35) 65%);
font-weight: 800 !important;
}
.ais-mind-ai {
display: inline-block;
font-size: 1.4em !important;
font-weight: 900 !important;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fde68a 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -.04em;
padding: 0 6px;
position: relative;
animation: aisMindAiShine 3s linear infinite;
text-shadow: 0 0 20px rgba(251, 191, 36, .4);
}
@keyframes aisMindAiShine {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.ais-mind-ai::before, .ais-mind-ai::after {
content: '✦';
position: absolute;
font-size: 0.4em;
color: #fde68a;
-webkit-text-fill-color: #fde68a;
text-shadow: 0 0 6px #fbbf24;
animation: aisMindStar 2s ease-in-out infinite;
}
.ais-mind-ai::before { top: -6px; left: -2px; }
.ais-mind-ai::after { bottom: -2px; right: 0; animation-delay: 1s; }
@keyframes aisMindStar {
0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
/* 모바일 */
@media (max-width: 1024px) {
.ais-mind-text { font-size: 22px !important; }
.ais-mind-icon { width: 80px; height: 80px; }
}
@media (max-width: 768px) {
.ais-mind-callout {
flex-direction: column;
text-align: center;
gap: 18px;
padding: 28px 22px;
margin-top: 40px;
}
.ais-mind-text { font-size: 18px !important; line-height: 1.55; }
.ais-mind-icon { width: 72px; height: 72px; }
.ais-mind-prefix { display: block; margin: 0 auto 8px; font-size: 0.95em !important; }
.ais-mind-ai { font-size: 1.3em !important; }
}
@media (max-width: 420px) {
.ais-mind-text { font-size: 16px !important; }
.ais-mind-icon { width: 64px; height: 64px; }
.ais-mind-callout { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
.ais-mind-callout::before, .ais-mind-ring, .ais-mind-tri,
.ais-mind-bang, .ais-mind-dot, .ais-mind-pulse,
.ais-mind-prefix, .ais-mind-ai,
.ais-mind-ai::before, .ais-mind-ai::after { animation: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 블로그 강조 — 색상별 알약 (4개 블로그 + 유튜브) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.aireq-blog-emp {
display: inline-block;
font-weight: 800 !important;
padding: 2px 10px;
border-radius: 6px;
margin: 0 2px;
letter-spacing: -.005em;
white-space: nowrap;
border: 1px solid transparent;
font-size: inherit !important;
line-height: 1.5;
}
/* 교습소 자체 블로그 — 인디고 (소속) */
.aireq-blog-self {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #1e3a8a !important;
border-color: rgba(30, 58, 138, .35);
}
/* 경기도교습소 블로그 — 그린 (지역) */
.aireq-blog-gg {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #065f46 !important;
border-color: rgba(6, 95, 70, .35);
}
/* 한국교습소총연합회 블로그 — 빨강 (전국 권위) */
.aireq-blog-kor {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #991b1b !important;
border-color: rgba(153, 27, 27, .35);
}
/* 웹지원센터 블로그 — 골드/주황 (파트너) */
.aireq-blog-web {
background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
color: #9a3412 !important;
border-color: rgba(154, 52, 18, .35);
}
/* 유튜브 — 유튜브 레드 */
.aireq-blog-yt {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #cc0000 !important;
border-color: rgba(204, 0, 0, .4);
position: relative;
padding-left: 26px;
}
.aireq-blog-yt::before {
content: '▶';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
color: #cc0000;
font-size: 0.85em;
}
/* 모바일 — 자간 압축 + 한 줄 유지 */
@media (max-width: 768px) {
.aireq-blog-emp {
padding: 2px 8px;
margin: 1px;
font-size: 14px !important;
}
.aireq-blog-yt { padding-left: 22px; }
}
@media (max-width: 380px) {
.aireq-blog-emp { padding: 2px 7px; font-size: 13px !important; }
}
/* 펼치는 sub 패널 */
.aireq-opt-panel { display: none; padding: 0 20px 20px 60px; }
.aireq-opt-panel.is-open { display: block; }
@media (max-width: 600px) { .aireq-opt-panel { padding: 0 16px 16px 16px; } }
.aireq-sub-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.aireq-sub-label { font-size: 13px !important; font-weight: 700; color: #475569; }
.aireq-sub-input {
width: 100%;
padding: 12px 14px;
font-size: 15px !important;
font-family: inherit;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 8px;
color: #0f172a;
resize: vertical;
}
.aireq-sub-input:focus { outline: 0; border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(30, 58, 138, .1); }
@media (max-width: 768px) { .aireq-sub-input { font-size: 16px !important; } }
/* STEP 04 — 개인정보 동의 */
.aireq-privacy {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 18px 22px;
margin-bottom: 20px;
}
.aireq-priv-row { padding: 8px 0; border-bottom: 1px solid #e2e8f0; }
.aireq-priv-row:last-child { border-bottom: 0; }
.aireq-priv-row strong { display: block; font-size: 14px !important; font-weight: 700; color: #1e3a8a; margin-bottom: 4px; }
.aireq-priv-row p { margin: 0; font-size: 14px !important; line-height: 1.7; color: #475569; }
.aireq-priv-agree {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: #fef3c7;
border: 2px solid #f59e0b;
border-radius: 10px;
cursor: pointer;
user-select: none;
transition: background .15s;
position: relative;
}
.aireq-priv-agree:hover { background: #fde68a; }
.aireq-priv-agree input { position: absolute; opacity: 0; pointer-events: none; }
.aireq-priv-mark {
flex-shrink: 0;
width: 22px; height: 22px;
border: 2px solid #b45309;
border-radius: 5px;
background: #fff;
position: relative;
}
.aireq-priv-agree input:checked + .aireq-priv-mark { background: #b45309; border-color: #b45309; }
.aireq-priv-agree input:checked + .aireq-priv-mark::after {
content: '';
position: absolute;
left: 6px; top: 2px;
width: 6px; height: 11px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.aireq-priv-text { font-size: 15px !important; color: #78350f; line-height: 1.5; }
.aireq-priv-text strong { color: #92400e; font-weight: 700; }
/* 제출 버튼 */
.aireq-actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.aireq-btn {
flex: 1 1 220px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 60px;
padding: 0 28px;
font-size: 17px;
font-weight: 800;
border-radius: 12px;
border: 0;
cursor: pointer;
transition: transform .2s, box-shadow .2s;
text-decoration: none;
letter-spacing: -.005em;
}
.aireq-btn-primary {
background: linear-gradient(135deg, #b45309, #d97706);
color: #fff;
box-shadow: 0 12px 30px -6px rgba(180, 83, 9, .55);
}
.aireq-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -4px rgba(180, 83, 9, .7); }
.aireq-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.aireq-btn-cancel { background: #e2e8f0; color: #475569; }
.aireq-btn-cancel:hover { background: #cbd5e1; color: #1e293b; }
@media (max-width: 600px) {
.aireq-actions { flex-direction: column; gap: 10px; }
.aireq-btn { width: 100%; flex: none; }
}
@media (hover: none) {
.aireq-btn:hover, .aireq-check-btn:hover { transform: none; box-shadow: inherit; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* /page/privacy · /page/terms — 개인정보처리방침 / 이용약관 */
/* · 좌우 15% 여백 (.container) 활용 / 단일 컬럼 본문 */
/* · 가독성 우선: 18px 본문, 1.85 line-height, keep-all */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.legal-section {
background: #fff;
padding: 70px 0 110px;
word-break: keep-all;
}
.legal-section > .container {
/* 데스크탑: 좌우 15% 여백 → 본문 폭 70% */
max-width: none;
width: 70%;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
}
@media (max-width: 1199px) {
/* 중간 화면: 좌우 8% 여백 → 본문 84% (가독성 보존) */
.legal-section > .container {
width: 84%;
}
}
@media (max-width: 768px) {
/* 모바일: 기존 .container 패딩 사용 (전체 폭 - 16px 양쪽) */
.legal-section > .container {
width: auto;
padding-left: 16px;
padding-right: 16px;
}
}
/* 타이틀 블록 */
.legal-title-block {
text-align: center;
margin-bottom: 36px;
}
.legal-tag {
display: inline-block;
font-family: 'JetBrains Mono', 'Pretendard Variable', monospace !important;
font-size: 12px !important;
font-weight: 800;
letter-spacing: .25em !important;
color: #1e3a8a;
background: #eef2ff;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 18px;
}
.legal-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
color: #0f172a;
letter-spacing: -.02em;
margin: 0 0 8px;
line-height: 1.25;
}
.legal-subtitle {
font-size: 16px;
color: #64748b;
font-weight: 600;
margin: 0 0 16px;
}
.legal-divider {
display: flex;
justify-content: center;
margin: 18px auto 14px;
}
.legal-divider span {
display: block;
width: 60px; height: 4px;
background: linear-gradient(90deg, #1e3a8a, #6366f1);
border-radius: 2px;
}
.legal-meta {
font-size: 13px;
color: #94a3b8;
margin: 0;
}
/* ── 상단 웹지원센터 안내 박스 ── */
.legal-mou-notice {
display: flex;
align-items: flex-start;
gap: 24px;
margin: 30px 0 50px;
padding: 28px 32px;
background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
border: 2px solid #bfdbfe;
border-radius: 16px;
position: relative;
overflow: hidden;
}
.legal-mou-notice::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 0% 0%, rgba(30, 58, 138, .06) 0%, transparent 50%);
pointer-events: none;
}
.legal-mou-icon {
flex-shrink: 0;
width: 64px; height: 64px;
color: #1e3a8a;
}
.legal-mou-icon svg { width: 100%; height: 100%; }
.legal-mou-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.legal-mou-tag {
display: inline-block;
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
font-weight: 800;
letter-spacing: .2em !important;
color: #fff;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
padding: 4px 12px;
border-radius: 4px;
margin-bottom: 10px;
}
.legal-mou-title {
font-size: 20px;
font-weight: 800;
color: #0f172a;
margin: 0 0 10px;
letter-spacing: -.01em;
}
.legal-mou-body p {
margin: 0;
font-size: 16px;
line-height: 1.8;
color: #1e293b;
}
.legal-mou-body p strong { color: #1e3a8a; font-weight: 800; }
.legal-mou-body p em {
font-style: normal;
background: linear-gradient(transparent 60%, rgba(251, 191, 36, .35) 60%);
font-weight: 700;
}
@media (max-width: 768px) {
.legal-mou-notice { flex-direction: column; gap: 16px; padding: 22px 20px; }
.legal-mou-icon { width: 48px; height: 48px; }
.legal-mou-title { font-size: 17px; }
.legal-mou-body p { font-size: 15px; line-height: 1.75; }
}
/* ── 조항 (article) ── */
.legal-article {
margin: 0 0 36px;
padding-bottom: 28px;
border-bottom: 1px solid #f1f5f9;
}
.legal-article:last-of-type { border-bottom: 0; padding-bottom: 0; }
.legal-article-title {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
font-size: 22px;
font-weight: 800;
color: #0f172a;
margin: 0 0 18px;
letter-spacing: -.01em;
line-height: 1.4;
}
.legal-article-num {
flex-shrink: 0;
display: inline-block;
font-family: 'JetBrains Mono', 'Pretendard Variable', monospace !important;
font-size: 14px !important;
font-weight: 800;
color: #1e3a8a;
background: #eef2ff;
padding: 4px 12px;
border-radius: 4px;
letter-spacing: -.01em !important;
}
.legal-article-body {
font-size: 18px;
line-height: 1.85;
color: #334155;
}
.legal-article-body p { margin: 0 0 12px; }
.legal-article-body p:last-child { margin-bottom: 0; }
.legal-article-body strong { color: #0f172a; font-weight: 700; }
.legal-list {
margin: 8px 0 12px;
padding-left: 24px;
}
.legal-list li {
margin-bottom: 8px;
line-height: 1.8;
}
.legal-list ul, .legal-list ol {
margin: 8px 0;
padding-left: 22px;
}
.legal-list ul li, .legal-list ol li {
font-size: 16px;
margin-bottom: 6px;
}
.legal-supplement {
margin-top: 16px !important;
padding: 14px 18px;
background: #f8fafc;
border-left: 3px solid #1e3a8a;
border-radius: 4px;
font-size: 16px !important;
color: #1e293b;
}
/* ── 책임자 정보 박스 (privacy 전용) ── */
.legal-officer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 18px;
}
.legal-officer-block {
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 14px;
padding: 24px 26px;
transition: border-color .2s, box-shadow .2s;
}
.legal-officer-block:hover {
border-color: #1e3a8a;
box-shadow: 0 8px 24px -8px rgba(30, 58, 138, .2);
}
.legal-officer-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 2px solid #e2e8f0;
}
.legal-officer-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
color: #fff;
border-radius: 10px;
}
.legal-officer-icon svg { width: 22px; height: 22px; }
.legal-officer-head h4 {
font-size: 16px;
font-weight: 800;
color: #0f172a;
margin: 0;
letter-spacing: -.01em;
}
.legal-officer-list {
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.legal-officer-list > div {
display: grid;
grid-template-columns: 70px 1fr;
gap: 12px;
align-items: baseline;
}
.legal-officer-list dt {
font-size: 13px;
font-weight: 700;
color: #64748b;
margin: 0;
}
.legal-officer-list dd {
font-size: 16px;
color: #0f172a;
font-weight: 600;
margin: 0;
word-break: break-all;
}
.legal-officer-list dd a {
color: #1e3a8a;
text-decoration: none;
font-weight: 700;
border-bottom: 1px dashed #1e3a8a;
}
.legal-officer-list dd a:hover { border-bottom-style: solid; }
@media (max-width: 768px) {
.legal-officer { grid-template-columns: 1fr; gap: 14px; }
.legal-officer-block { padding: 20px 22px; }
.legal-officer-list > div { grid-template-columns: 60px 1fr; }
.legal-officer-list dd { font-size: 15px; }
}
/* 관련 페이지 링크 (terms 하단) */
.legal-link-row {
margin-top: 40px;
padding-top: 24px;
border-top: 2px solid #e2e8f0;
text-align: center;
}
.legal-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: #f1f5f9;
color: #1e3a8a;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: background .2s, transform .2s;
}
.legal-link:hover {
background: #1e3a8a;
color: #fff;
transform: translateY(-2px);
}
.legal-link-arrow { font-weight: 900; }
/* ── 모바일 (≤768px) ── */
@media (max-width: 768px) {
.legal-section { padding: 50px 0 80px; }
.legal-title { font-size: 26px; }
.legal-subtitle { font-size: 14px; }
.legal-meta { font-size: 12px; }
.legal-mou-notice { margin: 24px 0 38px; }
.legal-article { margin-bottom: 28px; padding-bottom: 22px; }
.legal-article-title { font-size: 18px; gap: 10px; }
.legal-article-num { font-size: 13px !important; padding: 3px 10px; }
.legal-article-body { font-size: 16px; line-height: 1.8; }
.legal-list { padding-left: 20px; }
.legal-list li { font-size: 16px; }
.legal-list ul li, .legal-list ol li { font-size: 15px; }
.legal-supplement { font-size: 15px !important; padding: 12px 14px; }
}
@media (max-width: 380px) {
.legal-section > .container { padding-left: 14px; padding-right: 14px; }
.legal-title { font-size: 22px; }
.legal-article-title { font-size: 16px; }
.legal-article-body { font-size: 15px; }
.legal-mou-notice { padding: 18px 16px; }
.legal-mou-title { font-size: 16px; }
.legal-mou-body p { font-size: 14px; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* /blog — 다국어 블로그 (10개 언어) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.blog-section { padding: 60px 0 100px; background: #fafbff; word-break: keep-all; }
.blog-section > .container { max-width: 1280px; }
/* HERO */
.blog-hero { text-align: center; margin-bottom: 36px; }
.blog-tag {
display: inline-block;
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
font-weight: 800;
letter-spacing: .25em !important;
color: #fff;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 16px;
}
.blog-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
color: #0f172a;
letter-spacing: -.02em;
margin: 0 0 12px;
line-height: 1.25;
}
.blog-em {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.blog-subtitle { font-size: 16px; color: #64748b; margin: 0 0 24px; }
/* 언어 스위처 */
.blog-langs {
display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
margin: 24px auto 0; max-width: 920px;
}
.blog-langs-post { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; }
.blog-lang-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: #475569;
text-decoration: none;
transition: all .15s;
}
.blog-lang-btn:hover { border-color: #1e3a8a; color: #1e3a8a; transform: translateY(-1px); }
.blog-lang-btn.is-on {
background: #1e3a8a;
border-color: #1e3a8a;
color: #fff;
box-shadow: 0 4px 12px -2px rgba(30, 58, 138, .35);
}
.blog-lang-flag { font-size: 16px; line-height: 1; }
.blog-lang-name { letter-spacing: .03em; }
@media (max-width: 600px) {
.blog-lang-btn { padding: 7px 11px; font-size: 12px; }
.blog-lang-flag { font-size: 14px; }
}
/* 카테고리 필터 */
.blog-cats {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 36px 0 28px;
padding: 14px 18px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
.blog-cat {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px;
background: #f1f5f9;
border: 1px solid transparent;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
color: #475569;
text-decoration: none;
transition: all .15s;
}
.blog-cat:hover { background: #e2e8f0; color: #1e293b; }
.blog-cat.is-on {
background: var(--cat-color, #1e3a8a);
color: #fff;
border-color: transparent;
}
/* 카드 그리드 */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 14px -4px rgba(15, 23, 42, .08);
transition: transform .25s, box-shadow .25s;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px -10px rgba(15, 23, 42, .2);
}
.blog-card-link { display: block; color: inherit; text-decoration: none; }
.blog-card-img {
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f1f5f9;
position: relative;
}
.blog-card-img svg, .blog-card-img img {
width: 100%; height: 100%; display: block; object-fit: cover;
}
.blog-card-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 64px; font-weight: 900;
color: rgba(255, 255, 255, .9);
letter-spacing: -.04em;
}
.blog-card-body { padding: 22px 24px 20px; }
.blog-card-cat {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px !important;
font-weight: 800;
letter-spacing: -.005em;
margin-bottom: 10px;
}
.blog-card-title {
font-size: 19px !important;
font-weight: 800;
color: #0f172a;
line-height: 1.4;
letter-spacing: -.01em;
margin: 0 0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-excerpt {
font-size: 14px !important;
color: #64748b;
line-height: 1.65;
margin: 0 0 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-meta {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px !important;
color: #94a3b8;
font-weight: 600;
}
.blog-card-views { font-variant-numeric: tabular-nums; }
/* 빈 상태 */
.blog-empty {
padding: 80px 20px;
text-align: center;
background: #fff;
border: 2px dashed #cbd5e1;
border-radius: 14px;
color: #94a3b8;
}
/* 페이지네이션 */
.blog-pagination {
display: flex; gap: 6px; justify-content: center;
margin-top: 36px;
}
.blog-page {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px;
padding: 0 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #475569;
text-decoration: none;
font-weight: 700;
font-size: 14px;
}
.blog-page:hover { border-color: #1e3a8a; color: #1e3a8a; }
.blog-page.is-on { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
/* ── 게시물 상세 ── */
.blog-post {
background: #fff;
border-radius: 18px;
padding: 50px 60px 40px;
box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .08);
}
.blog-post-head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid #f1f5f9; }
.blog-post-cat {
display: inline-block;
padding: 5px 14px;
border-radius: 999px;
font-size: 13px !important;
font-weight: 800;
text-decoration: none;
margin-bottom: 16px;
letter-spacing: -.005em;
}
.blog-post-title {
font-size: clamp(24px, 3.4vw, 36px);
font-weight: 800;
color: #0f172a;
letter-spacing: -.02em;
margin: 0 0 16px;
line-height: 1.3;
}
.blog-post-meta {
display: flex; gap: 18px; align-items: center;
font-size: 14px; color: #64748b;
flex-wrap: wrap;
}
.blog-post-untrans {
background: #fef3c7;
color: #92400e !important;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px !important;
font-weight: 700;
}
.blog-post-img {
margin: 24px 0 0;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #f1f5f9;
}
.blog-post-img svg, .blog-post-img img {
width: 100%; height: 100%; display: block; object-fit: cover;
}
.blog-post-body {
font-size: 17px;
line-height: 1.85;
color: #1e293b;
margin: 32px 0;
}
.blog-post-body p { margin: 0 0 18px; }
.blog-post-body h2 { font-size: 26px; font-weight: 800; color: #0f172a; margin: 36px 0 14px; }
.blog-post-body h3 { font-size: 22px; font-weight: 800; color: #1e3a8a; margin: 28px 0 12px; }
.blog-post-body h4 { font-size: 18px; font-weight: 700; color: #0f172a; margin: 20px 0 10px; }
.blog-post-body ul, .blog-post-body ol { padding-left: 28px; margin: 14px 0; }
.blog-post-body li { margin-bottom: 8px; line-height: 1.85; }
.blog-post-body strong { color: #0f172a; font-weight: 700; }
.blog-post-body em { color: #b91c1c; font-style: italic; font-weight: 600; }
.blog-post-body blockquote {
margin: 20px 0; padding: 16px 22px;
background: #f8fafc; border-left: 4px solid #1e3a8a; border-radius: 4px;
color: #475569;
}
.blog-post-body a { color: #1e3a8a; text-decoration: underline; font-weight: 600; }
.blog-post-keywords {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 24px; padding-top: 20px; border-top: 1px solid #f1f5f9;
}
.blog-kw {
font-size: 13px !important;
color: #1e3a8a;
background: #eef2ff;
padding: 4px 10px;
border-radius: 4px;
font-weight: 600;
}
/* 이전/다음 */
.blog-pn {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin-top: 30px;
}
.blog-pn-item {
display: block; padding: 16px 20px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
text-decoration: none;
transition: border-color .15s, transform .15s;
}
.blog-pn-item:hover { border-color: #1e3a8a; transform: translateY(-2px); }
.blog-pn-prev { text-align: left; }
.blog-pn-next { text-align: right; }
.blog-pn-label { display: block; font-size: 12px !important; color: #94a3b8; font-weight: 700; margin-bottom: 4px; }
.blog-pn-title {
display: block;
font-size: 14px !important;
color: #0f172a;
font-weight: 700;
letter-spacing: -.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-back { margin-top: 28px; text-align: center; }
.blog-back-btn {
display: inline-block; padding: 12px 28px;
background: #fff; border: 2px solid #1e3a8a; color: #1e3a8a;
border-radius: 999px;
font-size: 14px !important; font-weight: 700;
text-decoration: none;
transition: background .15s, color .15s;
}
.blog-back-btn:hover { background: #1e3a8a; color: #fff; }
/* 모바일 */
@media (max-width: 768px) {
.blog-section { padding: 40px 0 70px; }
.blog-section > .container { padding-left: 14px; padding-right: 14px; }
.blog-post { padding: 28px 22px 24px; border-radius: 14px; }
.blog-post-body { font-size: 16px; line-height: 1.8; }
.blog-post-body h2 { font-size: 22px; }
.blog-post-body h3 { font-size: 19px; }
.blog-pn { grid-template-columns: 1fr; }
.blog-cats { padding: 10px 14px; }
}
@media (max-width: 420px) {
.blog-post { padding: 22px 16px; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 블로그 — 웹지원센터 스타일 독립 레이아웃 */
/* 코스믹 헤더 + 흰 콘텐츠 패널 + 우측 사이드바 */
/* 메인 사이트 메뉴 절대 미포함 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* === 기본 === */
body.bbody {
font-family: 'Pretendard Variable','Pretendard',sans-serif !important;
background: #f5f7fb !important;
color: #1e293b;
margin: 0; padding: 0;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
/* 메인 사이트 헤더/푸터·메뉴 강제 비활성 (안전망) */
body.bbody .site-header,
body.bbody .site-footer,
body.bbody .site-main,
body.bbody .mobile-menu,
body.bbody .sub-crumb-bar,
body.bbody .gnb,
body.bbody .actions,
body.bbody .brand,
body.bbody .hamburger,
body.bbody .mega-bg { display: none !important; }
/* === 코스믹 헤더 === */
.bhead-cosmic {
position: relative;
background: #0c1e4f;
color: #fff;
overflow: hidden;
}
.bhead-bg {
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
}
.bhead-bg svg { width: 100%; height: 100%; display: block; }
.bh-stars circle { animation: bhTwinkle 3s ease-in-out infinite; }
.bh-stars circle:nth-child(2n) { animation-delay: 1s; }
.bh-stars circle:nth-child(3n) { animation-delay: 2s; }
@keyframes bhTwinkle {
0%, 100% { opacity: var(--o, .8); }
50% { opacity: 1; }
}
.bh-planet-a { animation: bhFloat 8s ease-in-out infinite; transform-origin: 140px 180px; }
.bh-planet-b { animation: bhFloat 10s ease-in-out 2s infinite; transform-origin: 1330px 280px; }
@keyframes bhFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
.bh-stars circle, .bh-planet-a, .bh-planet-b { animation: none; }
}
/* === 헤더 상단: 로고 + 우측 링크 === */
.bhead-top { position: relative; z-index: 2; }
.bhead-top-inner {
max-width: 1280px;
margin: 0 auto;
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.bhead-brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #fff;
}
.bhead-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: rgba(255, 255, 255, .15);
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 8px;
font-size: 18px;
backdrop-filter: blur(6px);
}
.bhead-brand-text {
font-size: 16px;
font-weight: 800;
color: #fff;
letter-spacing: -.01em;
}
.bhead-top-links {
display: flex;
gap: 18px;
font-size: 13px;
}
.bhead-top-links a {
color: rgba(255, 255, 255, .8);
text-decoration: none;
font-weight: 600;
transition: color .15s;
}
.bhead-top-links a:hover { color: #fff; }
.bhead-top-links a.is-on { color: #fbbf24; font-weight: 800; }
@media (max-width: 600px) {
.bhead-top-inner { padding: 14px 16px; gap: 10px; }
.bhead-brand-text { font-size: 13px; }
.bhead-top-links { font-size: 12px; gap: 12px; }
.bhead-mark { width: 32px; height: 32px; font-size: 16px; }
}
/* === HERO === */
.bhero {
position: relative;
z-index: 1;
padding: 56px 24px 80px;
text-align: center;
}
.bhero-inner {
max-width: 920px;
margin: 0 auto;
}
.bhero-tag {
display: inline-block;
font-size: 13px;
font-weight: 700;
color: #fff;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 6px;
padding: 6px 14px;
margin-bottom: 20px;
backdrop-filter: blur(6px);
letter-spacing: -.005em;
}
.bhero-title {
font-size: clamp(34px, 5vw, 56px);
font-weight: 900;
letter-spacing: -.025em;
line-height: 1.15;
color: #fff;
margin: 0 0 14px;
text-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}
.bhero-em {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bhero-dot { color: #fbbf24; }
.bhero-sub {
font-size: clamp(14px, 1.4vw, 17px);
color: rgba(255, 255, 255, .85);
margin: 0 0 32px;
font-weight: 500;
}
/* HERO — 언어 핀 */
.bhero-langs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0 auto 32px;
max-width: 720px;
}
.bhero-lang {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: rgba(255, 255, 255, .9);
text-decoration: none;
transition: all .15s;
backdrop-filter: blur(8px);
}
.bhero-lang:hover {
background: rgba(255, 255, 255, .2);
border-color: rgba(255, 255, 255, .45);
color: #fff;
}
.bhero-lang.is-on {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-color: #fbbf24;
color: #0c1e4f;
box-shadow: 0 4px 14px -2px rgba(251, 191, 36, .55);
}
.bhero-lang-iso {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 16px;
line-height: 1;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.25);
flex-shrink: 0;
}
.bhero-lang-iso .fi {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
display: block;
}
.bhero-lang.is-on .bhero-lang-iso {
box-shadow: 0 0 0 1px rgba(12,30,79,.4), 0 1px 3px rgba(0,0,0,.25);
}
.bhero-lang-name { letter-spacing: -.005em; font-weight: 600; }
/* HERO — 검색바 */
.bhero-search {
display: flex;
align-items: center;
gap: 0;
max-width: 580px;
margin: 0 auto;
background: #fff;
border-radius: 14px;
padding: 6px 6px 6px 18px;
box-shadow: 0 8px 30px -8px rgba(0, 0, 0, .25);
}
.bhero-search-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
color: #94a3b8;
margin-right: 10px;
}
.bhero-search-input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-size: 16px;
font-family: inherit;
color: #0f172a;
padding: 14px 0;
min-width: 0;
}
.bhero-search-input::placeholder { color: #94a3b8; }
.bhero-search-btn {
flex-shrink: 0;
height: 44px;
padding: 0 22px;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
color: #fff;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
letter-spacing: -.005em;
transition: opacity .15s;
}
.bhero-search-btn:hover { opacity: .9; }
@media (max-width: 600px) {
.bhero { padding: 36px 18px 60px; }
.bhero-title { font-size: 30px; }
.bhero-langs { gap: 6px; }
.bhero-lang { padding: 6px 12px; font-size: 12px; }
.bhero-lang-iso { width: 18px; height: 13px; }
.bhero-search-input { font-size: 16px; padding: 12px 0; }
.bhero-search-btn { padding: 0 16px; font-size: 13px; }
}
/* slim 헤더 (post.php 등) — hero 없는 버전 */
.bhead-cosmic-slim { padding-bottom: 36px; }
.bhead-cosmic-slim .bhead-bg svg { transform: scale(1.2) translateY(-30%); }
/* === 메인 콘텐츠 영역 (흰 패널 — 코스믹과 살짝 겹침) === */
.bmain {
position: relative;
z-index: 5;
margin-top: -50px;
padding-bottom: 60px;
}
.bmain-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* 카테고리 가로 탭 (흰 패널 상단) */
.bcat-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
background: #fff;
border-radius: 16px;
padding: 14px 18px;
box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .15);
margin-bottom: 30px;
}
.bcat-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #f1f5f9;
border: 1px solid transparent;
border-radius: 999px;
font-size: 13.5px;
font-weight: 700;
color: #475569;
text-decoration: none;
transition: all .15s;
}
.bcat-tab:hover { background: #e2e8f0; color: #1e293b; }
.bcat-tab.is-on {
background: var(--cat-color, #1e3a8a);
color: #fff;
}
/* === 2-column layout (사이드바 좌측) === */
.blayout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
align-items: start;
}
@media (max-width: 1024px) {
.blayout { grid-template-columns: 1fr; }
.bside { order: 2; } /* 모바일에서는 사이드바 아래로 */
.bcontent { order: 1; }
}
/* === 게시물 그리드 === */
.bsearch-info {
margin: 0 0 18px;
font-size: 14px;
color: #475569;
background: #eff6ff;
border-left: 3px solid #1e3a8a;
padding: 10px 14px;
border-radius: 4px;
}
.bgrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 700px) { .bgrid { grid-template-columns: 1fr; gap: 18px; } }
.bcard {
background: #fff;
border-radius: 14px;
overflow: hidden;
border: 1px solid #e2e8f0;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.bcard:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px -10px rgba(15, 23, 42, .2);
border-color: #1e3a8a;
}
.bcard-link { display: block; color: inherit; text-decoration: none; }
.bcard-img {
aspect-ratio: 16 / 10;
background: #f1f5f9;
overflow: hidden;
position: relative;
}
.bcard-img svg, .bcard-img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bcard-ph {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 60px; font-weight: 900;
color: rgba(255, 255, 255, .9);
letter-spacing: -.04em;
}
.bcard-body { padding: 20px 22px 18px; }
.bcard-cat {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px !important;
font-weight: 800;
margin-bottom: 10px;
letter-spacing: -.005em;
}
.bcard-title {
font-size: 17px !important;
font-weight: 800;
color: #0f172a;
line-height: 1.4;
margin: 0 0 8px;
letter-spacing: -.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bcard-excerpt {
font-size: 13.5px;
color: #64748b;
line-height: 1.65;
margin: 0 0 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bcard-meta {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #94a3b8;
font-weight: 600;
}
.bempty {
background: #fff;
border: 2px dashed #cbd5e1;
border-radius: 14px;
padding: 60px 20px;
text-align: center;
color: #94a3b8;
}
/* 페이지네이션 */
.bpag {
display: flex; gap: 6px; justify-content: center;
margin-top: 30px;
}
.bpag-page {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px;
padding: 0 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #475569;
text-decoration: none;
font-weight: 700;
font-size: 14px;
transition: all .15s;
}
.bpag-page:hover { border-color: #1e3a8a; color: #1e3a8a; }
.bpag-page.is-on { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
/* === 사이드바 === */
.bside {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 20px;
}
@media (max-width: 1024px) { .bside { position: static; } }
.bside-box {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 22px 24px 18px;
}
.bside-title {
font-size: 15px !important;
font-weight: 800;
color: #0f172a;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 2px solid #f1f5f9;
letter-spacing: -.01em;
}
/* 카테고리 박스 */
.bside-cats { list-style: none; margin: 0; padding: 0; }
.bside-cats li + li { border-top: 1px solid #f1f5f9; }
.bside-cat {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 4px;
text-decoration: none;
color: #1e293b;
font-size: 14px;
font-weight: 600;
transition: padding-left .15s;
}
.bside-cat:hover { padding-left: 8px; color: #1e3a8a; }
.bside-cat.is-on {
color: #1e3a8a;
font-weight: 800;
}
.bside-cat-icon {
flex-shrink: 0;
width: 8px; height: 8px;
border-radius: 50%;
}
.bside-cat-name { flex: 1; min-width: 0; }
.bside-cat-cnt {
font-size: 12px;
font-weight: 700;
color: #94a3b8;
background: #f1f5f9;
padding: 2px 8px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
min-width: 24px;
text-align: center;
}
.bside-cat.is-on .bside-cat-cnt { background: #1e3a8a; color: #fff; }
/* 최신 글 */
.bside-recent { list-style: none; margin: 0; padding: 0; }
.bside-recent li + li { border-top: 1px solid #f1f5f9; }
.bside-recent-item {
display: flex;
gap: 10px;
padding: 10px 0;
text-decoration: none;
color: inherit;
}
.bside-recent-no {
flex-shrink: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 800;
color: #94a3b8;
width: 22px;
letter-spacing: .05em;
padding-top: 2px;
}
.bside-recent-body { flex: 1; min-width: 0; }
.bside-recent-title {
display: block;
font-size: 13.5px;
font-weight: 600;
color: #1e293b;
line-height: 1.4;
margin-bottom: 3px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.bside-recent-item:hover .bside-recent-title { color: #1e3a8a; }
.bside-recent-date {
font-size: 11px;
color: #94a3b8;
font-weight: 600;
}
/* === 푸터 === */
.bfoot {
background: #0f172a;
color: rgba(255, 255, 255, .65);
padding: 36px 24px;
text-align: center;
}
.bfoot-inner { max-width: 1280px; margin: 0 auto; }
.bfoot-brand {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.bfoot-mark {
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 8px;
font-size: 18px;
}
.bfoot-brand strong { color: #fff; font-size: 14px; font-weight: 800; }
.bfoot-meta {
font-size: 12.5px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.bfoot-meta a { color: #cbd5e1; text-decoration: none; transition: color .15s; }
.bfoot-meta a:hover { color: #fbbf24; }
.bfoot-copy {
font-size: 11.5px;
color: rgba(255, 255, 255, .4);
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.bfoot-admin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 50%;
color: rgba(255, 255, 255, .4);
text-decoration: none;
transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.bfoot-admin:hover {
background: rgba(251, 191, 36, .15);
border-color: rgba(251, 191, 36, .5);
color: #fbbf24;
transform: rotate(-12deg) scale(1.15);
}
/* === 게시물 상세 === */
body.bbody .blog-post {
max-width: 880px;
margin: 0 auto;
}
body.bbody .blog-section { background: transparent; padding: 0; }
body.bbody .blog-section > .container { max-width: 1280px; padding: 0 24px; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 블로그 게시물 상세 — AI 신뢰성 강화 (GEO) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bpost {
max-width: 920px;
margin: 0 auto;
background: #fff;
border-radius: 16px;
padding: 44px 56px 36px;
box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .12);
}
@media (max-width: 768px) { .bpost { padding: 26px 22px 24px; border-radius: 12px; } }
@media (max-width: 480px) { .bpost { padding: 22px 16px; } }
/* 브레드크럼 */
.bpost-crumb {
font-size: 13px;
color: #94a3b8;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.bpost-crumb a { color: #475569; text-decoration: none; font-weight: 600; }
.bpost-crumb a:hover { color: #1e3a8a; }
/* 헤더 */
.bpost-head { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid #f1f5f9; }
.bpost-title {
font-size: clamp(24px, 3.4vw, 36px);
font-weight: 900;
color: #0f172a;
letter-spacing: -.025em;
line-height: 1.3;
margin: 0 0 18px;
}
.bpost-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
font-size: 13px;
color: #64748b;
margin-bottom: 18px;
}
.bpost-meta-sep { color: #cbd5e1; }
.bpost-author {
display: inline-flex;
align-items: center;
gap: 6px;
color: #1e3a8a;
}
.bpost-author strong { color: #0f172a; font-weight: 700; }
.bpost-updated { color: #b45309; font-weight: 600; }
.bpost-untrans {
background: #fef3c7;
color: #92400e !important;
padding: 3px 10px;
border-radius: 4px;
font-size: 11px !important;
font-weight: 700;
}
/* 게시물 상단 언어 핀 */
.bpost-langs {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: 14px;
}
.bpost-lang {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
color: #475569;
text-decoration: none;
transition: all .15s;
}
.bpost-lang:hover { border-color: #1e3a8a; color: #1e3a8a; }
.bpost-lang.is-on { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.bpost-lang-iso {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 13px;
line-height: 1;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(0,0,0,.08);
flex-shrink: 0;
}
.bpost-lang-iso .fi {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
display: block;
}
/* 메인 이미지 */
.bpost-img {
margin: 0 0 28px;
border-radius: 14px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #f1f5f9;
}
.bpost-img svg, .bpost-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 🎯 TL;DR 박스 — AI Featured Snippet 최적화 */
.bpost-tldr {
margin: 0 0 32px;
padding: 24px 28px;
background: linear-gradient(135deg, #fff7e6 0%, #fef3c7 100%);
border: 2px solid #f59e0b;
border-radius: 14px;
position: relative;
box-shadow: 0 8px 20px -10px rgba(245, 158, 11, .35);
}
.bpost-tldr-title {
font-size: 17px !important;
font-weight: 900;
color: #b45309;
margin: 0 0 14px;
letter-spacing: -.01em;
display: flex;
align-items: center;
gap: 8px;
}
.bpost-tldr-title small {
font-size: 11px !important;
font-family: 'JetBrains Mono', monospace;
background: #b45309;
color: #fff;
padding: 3px 8px;
border-radius: 4px;
font-weight: 800;
letter-spacing: .1em;
}
.bpost-tldr-body { font-size: 15px; line-height: 1.75; color: #78350f; }
.bpost-tldr-body ul { margin: 0; padding-left: 24px; }
.bpost-tldr-body ul li {
margin-bottom: 8px;
font-weight: 600;
list-style: none;
position: relative;
}
.bpost-tldr-body ul li::before {
content: '▶';
position: absolute;
left: -22px;
color: #d97706;
font-size: 11px;
top: 5px;
}
.bpost-tldr-body p { margin: 0; }
/* 📋 목차 */
.bpost-toc {
margin: 0 0 32px;
padding: 22px 28px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
.bpost-toc-title {
font-size: 15px !important;
font-weight: 800;
color: #1e3a8a;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
}
.bpost-toc ol { margin: 0; padding-left: 22px; counter-reset: toc; }
.bpost-toc li {
list-style: none;
position: relative;
margin-bottom: 6px;
font-size: 14px;
line-height: 1.55;
counter-increment: toc;
}
.bpost-toc li::before {
content: counter(toc, decimal-leading-zero);
position: absolute;
left: -28px;
top: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 800;
color: #94a3b8;
}
.bpost-toc-h3 { padding-left: 16px; font-size: 13px; }
.bpost-toc-h3::before { display: none !important; }
.bpost-toc-h3::after {
content: '└─';
position: absolute;
left: 0; top: 0;
color: #cbd5e1;
}
.bpost-toc a { color: #475569; text-decoration: none; transition: color .15s, padding-left .15s; }
.bpost-toc a:hover { color: #1e3a8a; padding-left: 4px; }
/* 본문 */
.bpost-body {
font-size: 17px;
line-height: 1.85;
color: #1e293b;
margin: 0 0 36px;
}
.bpost-body p { margin: 0 0 18px; }
.bpost-body h2 {
font-size: 24px;
font-weight: 800;
color: #0f172a;
margin: 36px 0 14px;
padding-bottom: 10px;
border-bottom: 2px solid #e2e8f0;
scroll-margin-top: 80px;
}
.bpost-body h3 {
font-size: 19px;
font-weight: 800;
color: #1e3a8a;
margin: 28px 0 12px;
scroll-margin-top: 80px;
}
.bpost-body h4 { font-size: 17px; font-weight: 700; color: #0f172a; margin: 20px 0 10px; }
.bpost-body ul, .bpost-body ol { padding-left: 26px; margin: 14px 0 18px; }
.bpost-body li { margin-bottom: 8px; line-height: 1.85; }
.bpost-body strong { color: #0f172a; font-weight: 700; }
.bpost-body em { color: #b91c1c; font-style: italic; font-weight: 600; }
.bpost-body blockquote {
margin: 20px 0; padding: 16px 22px;
background: #f8fafc; border-left: 4px solid #1e3a8a; border-radius: 4px;
color: #475569; font-style: italic;
}
.bpost-body a { color: #1e3a8a; text-decoration: underline; font-weight: 600; }
.bpost-body a:hover { color: #6366f1; }
/* ❓ FAQ — FAQPage schema 친화 */
.bpost-faq {
margin: 36px 0;
padding: 28px 30px;
background: #f8fafc;
border-radius: 14px;
border-left: 4px solid #6366f1;
}
.bpost-faq-title {
font-size: 19px !important;
font-weight: 900;
color: #0f172a;
margin: 0 0 18px;
}
.bpost-faq-list { display: flex; flex-direction: column; gap: 10px; }
.bpost-faq-item {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.bpost-faq-item[open] {
border-color: #6366f1;
box-shadow: 0 4px 14px -6px rgba(99, 102, 241, .25);
}
.bpost-faq-item summary {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 16px 20px;
cursor: pointer;
font-size: 15px;
font-weight: 700;
color: #0f172a;
list-style: none;
position: relative;
}
.bpost-faq-item summary::-webkit-details-marker { display: none; }
.bpost-faq-item summary::after {
content: '+';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
color: #6366f1;
font-weight: 800;
transition: transform .2s;
}
.bpost-faq-item[open] summary::after { content: '−'; }
.bpost-faq-q-mark {
flex-shrink: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 900;
color: #6366f1;
background: #eef2ff;
padding: 3px 9px;
border-radius: 4px;
letter-spacing: -.02em;
}
.bpost-faq-q { flex: 1; padding-right: 30px; line-height: 1.55; }
.bpost-faq-a {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 0 20px 16px 50px;
color: #475569;
font-size: 14.5px;
line-height: 1.75;
}
.bpost-faq-a-mark {
position: absolute;
left: 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 900;
color: #b91c1c;
background: #fee2e2;
padding: 3px 9px;
border-radius: 4px;
}
.bpost-faq-a p { margin: 0; }
/* 📚 출처 */
.bpost-sources {
margin: 36px 0;
padding: 22px 28px;
background: #f0f9ff;
border-radius: 12px;
border-left: 4px solid #0891b2;
}
.bpost-sources-title {
font-size: 16px !important;
font-weight: 800;
color: #0e7490;
margin: 0 0 14px;
letter-spacing: -.01em;
}
.bpost-sources ul { margin: 0; padding-left: 22px; }
.bpost-sources li {
font-size: 13.5px;
line-height: 1.7;
color: #155e75;
margin-bottom: 6px;
list-style: none;
position: relative;
}
.bpost-sources li::before {
content: '📄';
position: absolute;
left: -22px;
font-size: 11px;
top: 3px;
}
/* 키워드 */
.bpost-keywords {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid #f1f5f9;
}
.bpost-kw {
font-size: 12.5px !important;
color: #1e3a8a;
background: #eef2ff;
padding: 4px 10px;
border-radius: 4px;
font-weight: 600;
}
/* 작성자 카드 — E-E-A-T 신호 */
.bpost-author-card {
margin: 28px 0 0;
padding: 22px 26px;
background: linear-gradient(135deg, #f8fafc, #eef2ff);
border: 1px solid #c7d2fe;
border-radius: 12px;
display: flex;
gap: 18px;
align-items: flex-start;
}
.bpost-author-icon {
flex-shrink: 0;
width: 56px; height: 56px;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.bpost-author-icon svg { width: 100%; height: 100%; }
.bpost-author-body { flex: 1; min-width: 0; }
.bpost-author-name {
font-size: 15px;
font-weight: 800;
color: #0f172a;
margin-bottom: 4px;
letter-spacing: -.01em;
}
.bpost-author-role {
font-size: 13px;
color: #475569;
margin-bottom: 8px;
font-weight: 600;
}
.bpost-author-meta {
font-size: 12px;
color: #64748b;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
line-height: 1.6;
}
.bpost-author-meta a { color: #1e3a8a; text-decoration: none; font-weight: 700; }
.bpost-author-meta a:hover { color: #6366f1; }
/* 🔗 관련 게시물 */
.bpost-related {
max-width: 920px;
margin: 40px auto 0;
}
.bpost-related-title {
font-size: 19px !important;
font-weight: 900;
color: #0f172a;
margin: 0 0 18px;
letter-spacing: -.01em;
}
.bpost-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 768px) { .bpost-related-grid { grid-template-columns: 1fr; } }
.bpost-related-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bpost-related-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 26px -10px rgba(15, 23, 42, .15);
border-color: #1e3a8a;
}
.bpost-related-img { aspect-ratio: 16 / 9; background: #f1f5f9; }
.bpost-related-img svg, .bpost-related-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bpost-related-body { padding: 14px 16px; }
.bpost-related-cat { font-size: 11px !important; font-weight: 800; }
.bpost-related-name {
font-size: 14px !important;
font-weight: 800;
color: #0f172a;
line-height: 1.4;
margin: 4px 0 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bpost-related-excerpt {
font-size: 12.5px;
color: #64748b;
line-height: 1.55;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 이전/다음 */
.bpost-pn {
max-width: 920px;
margin: 36px auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 600px) { .bpost-pn { grid-template-columns: 1fr; } }
.bpost-pn-item {
display: block;
padding: 16px 20px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
text-decoration: none;
transition: border-color .15s, transform .15s;
}
.bpost-pn-item:hover { border-color: #1e3a8a; transform: translateY(-2px); }
.bpost-pn-prev { text-align: left; }
.bpost-pn-next { text-align: right; }
.bpost-pn-label { display: block; font-size: 11.5px !important; color: #94a3b8; font-weight: 700; margin-bottom: 4px; }
.bpost-pn-name {
display: block;
font-size: 14px !important;
color: #0f172a;
font-weight: 700;
letter-spacing: -.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bpost-back {
max-width: 920px;
margin: 24px auto 0;
text-align: center;
}
.bpost-back-btn {
display: inline-block;
padding: 12px 28px;
background: #fff;
border: 2px solid #1e3a8a;
color: #1e3a8a;
border-radius: 999px;
font-size: 14px !important;
font-weight: 700;
text-decoration: none;
transition: background .15s, color .15s;
}
.bpost-back-btn:hover { background: #1e3a8a; color: #fff; }
/* ════════════════════════════════════════════════════════════════
만족도 설문조사 (/training/survey.php)
════════════════════════════════════════════════════════════════ */
.training-survey { padding: 40px 0 64px; background: #f8fafc; min-height: 60vh; }
/* training-survey 는 메인 .container (좌우 15%) 를 그대로 따른다 */
.training-survey .ts-head {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
padding: 14px 18px; margin-bottom: 18px;
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
}
.training-survey .ts-who { font-size: 14px; color: #475569; }
.training-survey .ts-who strong { color: #1e3a8a; font-size: 16px; font-weight: 800; margin: 0 4px; }
.training-survey .ts-region { color: #1e3a8a; font-weight: 700; margin-right: 6px; }
.training-survey .ts-inst { color: #64748b; }
.training-survey .ts-back {
font-size: 13px; color: #475569; font-weight: 600;
padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.training-survey .ts-back:hover { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.training-survey .ts-title {
font-size: 26px; font-weight: 900; color: #0f172a;
text-align: center; line-height: 1.4; margin: 24px 0 20px;
letter-spacing: -0.02em;
}
.training-survey .ts-banner {
padding: 16px 20px; margin-bottom: 24px;
background: #eff6ff; border-left: 5px solid #2563eb; border-radius: 8px;
font-size: 14px; line-height: 1.6; color: #1e3a8a;
}
.training-survey .ts-banner strong { color: #1e3a8a; font-weight: 800; display: inline-block; margin-right: 6px; }
.training-survey .ts-banner-success { background: #ecfdf5; border-left-color: #10b981; color: #065f46; }
.training-survey .ts-banner-success strong { color: #047857; }
.training-survey .ts-banner-info { background: #f0f9ff; border-left-color: #0284c7; color: #0c4a6e; }
.training-survey .ts-banner-error { background: #fef2f2; border-left-color: #ef4444; color: #991b1b; }
.training-survey .ts-form { display: flex; flex-direction: column; gap: 18px; }
.training-survey .ts-q {
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
padding: 22px 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.training-survey .ts-q-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 8px;
}
.training-survey .ts-q-num {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
background: #1e3a8a; color: #fff;
border-radius: 50%;
font-size: 13px; font-weight: 800;
flex-shrink: 0;
}
.training-survey .ts-q-title { font-size: 17px; font-weight: 800; color: #0f172a; }
.training-survey .ts-q-title small { font-size: 13px; color: #64748b; font-weight: 600; margin-left: 4px; }
.training-survey .ts-q-desc {
font-size: 14px; color: #475569; line-height: 1.6;
margin: 4px 0 16px; padding-left: 40px;
}
.training-survey .ts-scale {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
padding-left: 40px;
}
.training-survey .ts-scale-4 {
grid-template-columns: repeat(4, 1fr);
}
.training-survey .ts-scale-item .ts-scale-box {
display: inline-block; width: 22px; height: 22px;
border: 2px solid #94a3b8; border-radius: 5px;
background: #fff;
position: relative;
transition: all .15s;
flex-shrink: 0;
}
.training-survey .ts-scale-item .ts-scale-box::after {
content: ''; position: absolute;
left: 5px; top: 1px;
width: 7px; height: 12px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform .15s;
}
.training-survey .ts-scale-item.is-checked .ts-scale-box { background: #1e3a8a; border-color: #1e3a8a; }
.training-survey .ts-scale-item.is-checked .ts-scale-box::after { transform: rotate(45deg) scale(1); }
.training-survey .ts-scale-item .ts-scale-text {
display: flex; flex-direction: column; gap: 2px;
align-items: center; text-align: center;
}
.training-survey .ts-scale-item.is-rank-5.is-checked { border-color: #16a34a; background: #ecfdf5; }
.training-survey .ts-scale-item.is-rank-5.is-checked .ts-scale-box { background: #16a34a; border-color: #16a34a; }
.training-survey .ts-scale-item.is-rank-5.is-checked .ts-scale-num { color: #15803d; }
.training-survey .ts-scale-item.is-rank-4.is-checked { border-color: #4ade80; background: #f0fdf4; }
.training-survey .ts-scale-item.is-rank-4.is-checked .ts-scale-box { background: #4ade80; border-color: #4ade80; }
.training-survey .ts-scale-item.is-rank-4.is-checked .ts-scale-num { color: #16a34a; }
.training-survey .ts-scale-item.is-rank-3.is-checked { border-color: #facc15; background: #fefce8; }
.training-survey .ts-scale-item.is-rank-3.is-checked .ts-scale-box { background: #facc15; border-color: #facc15; }
.training-survey .ts-scale-item.is-rank-3.is-checked .ts-scale-num { color: #a16207; }
.training-survey .ts-scale-item.is-rank-1.is-checked { border-color: #ef4444; background: #fef2f2; }
.training-survey .ts-scale-item.is-rank-1.is-checked .ts-scale-box { background: #ef4444; border-color: #ef4444; }
.training-survey .ts-scale-item.is-rank-1.is-checked .ts-scale-num { color: #b91c1c; }
/* 안내 문구 (집계 기준) */
.training-survey .ts-policy {
margin: 24px 0 12px;
padding: 16px 20px;
background: #f1f5f9;
border-left: 4px solid #64748b;
border-radius: 8px;
font-size: 13px;
color: #475569;
line-height: 1.7;
text-align: center;
}
.training-survey .ts-policy b { color: #1e3a8a; font-weight: 800; }
.training-survey .ts-scale-item {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px;
padding: 14px 8px; min-height: 86px;
border: 2px solid #e2e8f0; border-radius: 12px;
background: #f8fafc;
cursor: pointer;
transition: all .15s;
text-align: center;
}
.training-survey .ts-scale-item:hover { border-color: #93c5fd; background: #eff6ff; }
.training-survey .ts-scale-item input[type="radio"] {
position: absolute; opacity: 0; pointer-events: none;
}
.training-survey .ts-scale-item.is-checked {
border-color: #1e3a8a; background: #dbeafe;
box-shadow: 0 4px 12px rgba(30,58,138,0.15);
}
.training-survey .ts-scale-num {
font-size: 22px; font-weight: 900; color: #1e3a8a;
line-height: 1;
}
.training-survey .ts-scale-label {
font-size: 12px; font-weight: 600; color: #475569;
line-height: 1.2;
}
.training-survey .ts-scale-item.is-checked .ts-scale-num { color: #1e40af; }
.training-survey .ts-scale-item.is-checked .ts-scale-label { color: #1e3a8a; }
.training-survey .ts-q-comment textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #cbd5e1; border-radius: 8px;
font-family: inherit; font-size: 14px; line-height: 1.6;
resize: vertical;
margin-left: 40px; max-width: calc(100% - 40px);
box-sizing: border-box;
}
.training-survey .ts-q-comment textarea:focus {
outline: none; border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.training-survey .ts-q-comment textarea[readonly] {
background: #f1f5f9; color: #475569; cursor: not-allowed;
}
.training-survey .ts-submit-wrap {
display: flex; justify-content: center; margin-top: 14px;
}
.training-survey .ts-submit-btn {
padding: 14px 36px;
background: #1e3a8a; color: #fff;
border: none; border-radius: 10px;
font-size: 16px; font-weight: 800; letter-spacing: 0.02em;
cursor: pointer;
transition: background .15s, transform .15s, box-shadow .15s;
box-shadow: 0 4px 12px rgba(30,58,138,0.25);
}
.training-survey .ts-submit-btn:hover {
background: #1e40af; transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(30,58,138,0.35);
}
/* 이수증 CTA (설문 페이지 하단) */
.training-survey .ts-cert-cta-wrap {
margin-top: 36px; padding: 24px 22px;
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.training-survey .ts-cert-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
width: 100%; max-width: 460px;
padding: 16px 22px;
border: none; border-radius: 12px;
font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
text-decoration: none;
transition: all .2s;
cursor: pointer;
}
.training-survey .ts-cert-cta.is-disabled {
background: #e2e8f0; color: #94a3b8;
cursor: not-allowed;
}
.training-survey .ts-cert-cta.is-ready {
background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
color: #fff;
box-shadow: 0 8px 24px rgba(245,158,11,0.35);
animation: tsCtaPulse 1.8s ease-in-out infinite;
}
.training-survey .ts-cert-cta.is-ready:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(245,158,11,0.45);
}
.training-survey .ts-cert-cta.is-issued {
background: #10b981; color: #fff;
box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.training-survey .ts-cert-cta.is-issued:hover {
background: #059669;
transform: translateY(-1px);
}
.training-survey .ts-cert-cta-help {
font-size: 13px; color: #94a3b8; text-align: center;
}
@keyframes tsCtaPulse {
0%,100% { box-shadow: 0 8px 24px rgba(245,158,11,0.35); }
50% { box-shadow: 0 10px 32px rgba(245,158,11,0.55); }
}
/* 모바일 대응 — 설문 페이지 */
@media (max-width: 640px) {
.training-survey { padding: 24px 0 48px; }
.training-survey .ts-title { font-size: 20px; }
.training-survey .ts-q { padding: 16px 14px; }
.training-survey .ts-q-head { gap: 8px; }
.training-survey .ts-q-num { width: 26px; height: 26px; font-size: 12px; }
.training-survey .ts-q-title { font-size: 16px; }
.training-survey .ts-q-desc {
padding-left: 0;
font-size: 14px; line-height: 1.6;
}
.training-survey .ts-q-comment textarea {
margin-left: 0; max-width: 100%;
font-size: 16px; /* iOS 자동 줌 방지 */
line-height: 1.6;
}
/* 기본 5점 척도 (5문항 시절 잔재 — 다른 곳에서 ts-scale 만 쓰는 경우 위함) */
.training-survey .ts-scale {
padding-left: 0;
grid-template-columns: repeat(5, 1fr); gap: 6px;
}
/* ★ 현재 운영 중인 4점 척도 (5점/4점/3점/1점) — ts-scale-4 명시 */
.training-survey .ts-scale.ts-scale-4 {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
/* 옵션 카드 크기 — 손가락 터치 영역 확보 */
.training-survey .ts-scale-item {
min-height: 84px;
padding: 12px 6px;
gap: 4px;
}
.training-survey .ts-scale-item .ts-scale-box {
width: 18px; height: 18px;
}
.training-survey .ts-scale-item .ts-scale-box::after {
left: 4px; top: 1px; width: 5px; height: 9px;
}
.training-survey .ts-scale-num { font-size: 18px; font-weight: 900; }
/* ★ 라벨 가독성 — 옛 10px 은 너무 작아 13px 로 키움 */
.training-survey .ts-scale-label { font-size: 13px; font-weight: 700; line-height: 1.2; }
.training-survey .ts-cert-cta { font-size: 15px; padding: 14px 18px; }
.training-survey .ts-submit-btn {
width: 100%;
padding: 16px 24px;
font-size: 16px;
min-height: 56px; /* 터치 영역 확장 */
}
.training-survey .ts-banner {
font-size: 14px;
padding: 14px 16px;
line-height: 1.6;
}
}
/* 매우 작은 화면 (iPhone SE 등 ≤380px) — 라벨이 한 줄에 안 들어가면 2줄 허용 */
@media (max-width: 380px) {
.training-survey .ts-scale.ts-scale-4 { gap: 5px; }
.training-survey .ts-scale-item { padding: 10px 4px; min-height: 90px; }
.training-survey .ts-scale-num { font-size: 17px; }
.training-survey .ts-scale-label {
font-size: 12px;
word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
white-space: normal;
}
}
/* 영상 목록 CTA — 설문 상태 (주황 펄스, 좀 더 강조) */
.tl-cert-cta.is-survey {
background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
color: #fff !important;
box-shadow: 0 8px 24px rgba(245,158,11,0.4) !important;
animation: tsCtaPulse 1.8s ease-in-out infinite;
}
.tl-cert-cta.is-survey:hover { transform: translateY(-2px); }
/* ════════════════════════════════════════════════════════════════
모바일 최적화 — 이중탭 줌 300ms 지연 제거 + 클릭 응답성 향상
(iOS Safari 의 double-tap-to-zoom 시 발생하는 input lag 제거)
════════════════════════════════════════════════════════════════ */
button,
[role="button"],
.tl-card-btn, .tl-card-btn-disabled, .tl-cert-cta,
.ts-submit-btn, .ts-cert-cta, .ts-back, .ts-scale-item,
.cv-btn, .cv-celebrate-close,
.tp-cn-go, .tp-auto-next-go, .tp-auto-next-cancel, .tp-done-btn,
.te-btn, .te-missing-link, .te-browser-btn,
.ais-btn, .ais-apply-cta, .ais-showcase-card, .ais-showcase-go,
.adm-nav .nav-item,
a.btn, .btn,
.familySelect, .family-site,
input[type="submit"], input[type="button"],
.ft-admin-link {
touch-action: manipulation;
}
/* iOS 의 long-press 메뉴/highlight 색 자체 토글 */
.tl-card-btn, .tl-cert-cta, .ts-submit-btn, .ts-cert-cta,
.tp-cn-go, .tp-auto-next-go,
.te-btn, .ais-btn, .ais-apply-cta, .ais-showcase-card {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* ════════════════════════════════════════════════════════════════
AI 지원 페이지 — 실제 운영 사례 SHOWCASE (홈페이지 + 블로그)
════════════════════════════════════════════════════════════════ */
.ais-showcase {
position: relative;
padding: 100px 0;
background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
color: #fff;
overflow: hidden;
}
.ais-showcase > .container { padding-left: 8%; padding-right: 8%; max-width: none; position: relative; z-index: 2; }
.ais-showcase-deco {
position: absolute; width: 600px; height: 600px;
pointer-events: none; z-index: 1;
animation: aisDecoFloat 8s ease-in-out infinite;
}
.ais-showcase-deco-1 { top: -200px; right: -200px; }
.ais-showcase-deco-2 { bottom: -200px; left: -200px; animation-delay: -4s; }
@keyframes aisDecoFloat {
0%,100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-30px) scale(1.08); }
}
.ais-showcase-head { text-align: center; margin-bottom: 56px; }
.ais-showcase-tag {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 12px; font-weight: 700;
letter-spacing: 0.3em;
color: #fbbf24;
padding: 6px 16px;
border: 1px solid rgba(251, 191, 36, .35);
border-radius: 999px;
margin-bottom: 22px;
background: rgba(251, 191, 36, 0.08);
}
.ais-showcase-title {
font-size: clamp(28px, 4vw, 48px);
font-weight: 900;
line-height: 1.25;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.ais-showcase-em {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ais-showcase-sub {
font-size: 17px;
color: rgba(255,255,255,0.7);
line-height: 1.7;
max-width: 720px;
margin: 0 auto;
}
/* 카드 그리드 */
.ais-showcase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 60px;
}
.ais-showcase-card {
position: relative;
display: flex; flex-direction: column;
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 20px;
padding: 24px;
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
}
.ais-showcase-card:hover {
transform: translateY(-6px);
border-color: rgba(251, 191, 36, 0.45);
box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 0 4px rgba(251, 191, 36, 0.08);
}
.ais-showcase-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 70% 20%, rgba(251,191,36,0.12), transparent 60%);
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}
.ais-showcase-card:hover::before { opacity: 1; }
.ais-showcase-card-badge {
display: inline-flex; align-items: center; gap: 6px;
position: absolute; top: 16px; right: 16px; z-index: 3;
padding: 6px 14px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #0f172a;
font-size: 12px; font-weight: 800;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(251,191,36,0.4);
}
.ais-showcase-card-badge-blog {
background: linear-gradient(135deg, #818cf8, #6366f1);
color: #fff;
box-shadow: 0 6px 18px rgba(99,102,241,0.4);
}
/* 브라우저 mockup */
.ais-showcase-browser {
margin-top: 8px;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}
.ais-browser-bar {
display: flex; align-items: center; gap: 6px;
padding: 10px 14px;
background: #f1f5f9;
border-bottom: 1px solid #e2e8f0;
}
.ais-browser-dot {
width: 11px; height: 11px; border-radius: 50%;
display: inline-block;
}
.ais-browser-dot-r { background: #ef4444; }
.ais-browser-dot-y { background: #facc15; }
.ais-browser-dot-g { background: #22c55e; }
.ais-browser-url {
flex: 1;
display: inline-flex; align-items: center; gap: 6px;
margin-left: 8px;
padding: 4px 12px;
background: #fff;
border-radius: 999px;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 11px;
color: #334155;
border: 1px solid #e2e8f0;
}
/* 실제 사이트 스크린샷 */
.ais-screenshot-wrap {
position: relative;
width: 100%;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
overflow: hidden;
aspect-ratio: 2 / 1; /* 900 × 450 */
}
.ais-screenshot {
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
transition: transform .6s ease;
}
.ais-showcase-card:hover .ais-screenshot {
transform: scale(1.04);
}
/* 정적 mockup (홈페이지/블로그 공통) */
.ais-mockup {
position: relative;
background: #fff;
color: #0f172a;
font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
min-height: 340px;
padding: 0;
overflow: hidden;
}
.ais-mockup-nav {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #e2e8f0;
background: #fff;
}
.ais-mockup-logo {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 800;
color: #1e3a8a;
}
.ais-mockup-menu {
display: flex; gap: 14px;
font-size: 11px; font-weight: 600; color: #475569;
}
.ais-mockup-menu span:first-child { color: #1e3a8a; }
/* 홈페이지 mockup */
.ais-mockup-hero {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px;
align-items: center;
padding: 18px 16px;
background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 100%);
}
.ais-mockup-hero-text { line-height: 1.4; }
.ais-mockup-hero-tag {
display: inline-block;
font-size: 9px; font-weight: 700; color: #2563eb;
background: rgba(37,99,235,0.12);
padding: 3px 8px; border-radius: 999px;
margin-bottom: 8px;
}
.ais-mockup-hero-title {
font-size: 18px; font-weight: 900; color: #0f172a;
line-height: 1.2; letter-spacing: -0.02em;
margin-bottom: 6px;
}
.ais-mockup-hero-sub {
font-size: 11px; color: #475569;
margin-bottom: 10px;
}
.ais-mockup-hero-btns { display: flex; gap: 6px; }
.ais-mockup-btn {
font-size: 10px; font-weight: 700;
padding: 5px 10px; border-radius: 6px;
}
.ais-mockup-btn-p { background: #2563eb; color: #fff; }
.ais-mockup-btn-s { background: #fff; color: #2563eb; border: 1px solid #2563eb; }
.ais-mockup-hero-img {
width: 100%; aspect-ratio: 1;
max-width: 80px; margin: 0 auto;
}
.ais-mockup-lang {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
background: #fef3c7;
border-top: 1px solid #fde68a;
border-bottom: 1px solid #fde68a;
}
.ais-mockup-lang-label {
font-size: 11px; font-weight: 800;
color: #92400e;
flex-shrink: 0;
}
.ais-mockup-lang-flags {
display: flex; gap: 4px; flex-wrap: wrap;
font-size: 14px;
}
.ais-mockup-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
padding: 12px 16px;
}
.ais-mockup-card-mini {
background: linear-gradient(135deg, var(--c1, #f1f5f9), var(--c2, #e2e8f0));
border-radius: 8px;
padding: 12px 6px;
text-align: center;
font-size: 16px;
line-height: 1.4;
}
.ais-mockup-card-mini b {
display: block;
font-size: 10px;
color: #0f172a;
font-weight: 800;
margin-top: 4px;
}
/* 블로그 mockup */
.ais-mockup-nav-blog {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
border-bottom: 1px solid #c4b5fd;
}
.ais-mockup-search {
font-size: 10px; color: #6366f1;
background: #fff;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid #c4b5fd;
}
.ais-mockup-lang-tabs {
display: flex; gap: 4px; padding: 10px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
overflow-x: auto;
}
.ais-mockup-lang-tabs span {
flex-shrink: 0;
font-size: 10px; font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
background: #fff;
border: 1px solid #e2e8f0;
color: #64748b;
}
.ais-mockup-lang-tabs span.is-active {
background: #6366f1;
color: #fff;
border-color: #6366f1;
}
.ais-mockup-posts {
padding: 10px 16px;
display: flex; flex-direction: column; gap: 10px;
}
.ais-mockup-post {
display: flex; align-items: center; gap: 10px;
padding: 10px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.ais-mockup-post-img {
width: 44px; height: 44px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ais-mockup-post-text { flex: 1; line-height: 1.4; }
.ais-mockup-post-text b {
display: block;
font-size: 12px; font-weight: 800; color: #0f172a;
margin-bottom: 3px;
}
.ais-mockup-post-text small {
font-size: 10px; color: #94a3b8;
}
.ais-mockup-ai {
display: inline-flex; align-items: center; gap: 6px;
margin: 6px 16px 14px;
padding: 6px 12px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #fff;
font-size: 10px; font-weight: 800;
border-radius: 999px;
width: max-content;
box-shadow: 0 3px 8px rgba(251,191,36,0.4);
}
.ais-showcase-info {
padding: 18px 6px 4px;
position: relative; z-index: 2;
}
.ais-showcase-name {
font-size: 19px;
font-weight: 800;
color: #fff;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.ais-showcase-desc {
font-size: 14px;
color: rgba(255,255,255,0.65);
line-height: 1.6;
margin: 0 0 14px;
}
.ais-showcase-go {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: rgba(251,191,36,0.12);
border: 1px solid rgba(251,191,36,0.4);
border-radius: 999px;
color: #fbbf24;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
transition: all .25s;
}
.ais-showcase-card:hover .ais-showcase-go {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #0f172a;
border-color: transparent;
box-shadow: 0 8px 24px rgba(251,191,36,0.4);
}
/* 카피 (간결판) */
.ais-showcase-text {
text-align: center;
margin-top: 40px;
padding: 24px 16px;
}
.ais-showcase-text-title {
font-size: 40px;
font-weight: 900;
color: #fff;
margin: 0 0 14px;
letter-spacing: -0.02em;
line-height: 1.2;
}
.ais-showcase-text-sub {
font-size: 20px;
font-weight: 600;
color: #fbbf24;
margin: 0;
line-height: 1.5;
letter-spacing: -0.01em;
word-break: keep-all;
}
@media (max-width: 768px) {
.ais-showcase-text-title { font-size: 30px; }
.ais-showcase-text-sub { font-size: 16px; }
}
/* 큰 카피 배너 */
.ais-showcase-banner {
position: relative;
text-align: center;
padding: 56px 24px 48px;
background: linear-gradient(135deg, rgba(251,191,36,0.18) 0%, rgba(244,114,182,0.12) 100%);
border: 2px solid rgba(251,191,36,0.35);
border-radius: 28px;
overflow: hidden;
}
.ais-showcase-banner::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(circle, rgba(251,191,36,0.15) 0%, transparent 70%);
animation: aisBannerShine 6s linear infinite;
pointer-events: none;
}
@keyframes aisBannerShine {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ais-showcase-spark {
position: absolute;
width: 64px; height: 64px;
filter: drop-shadow(0 0 12px rgba(251,191,36,0.7));
animation: aisSparkSpin 4s linear infinite;
}
.ais-showcase-spark-l { top: 20%; left: 8%; }
.ais-showcase-spark-r { top: 20%; right: 8%; animation-direction: reverse; }
@keyframes aisSparkSpin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.18); }
100% { transform: rotate(360deg) scale(1); }
}
.ais-showcase-banner-text {
position: relative; z-index: 2;
margin: 0;
font-size: clamp(36px, 6vw, 64px);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.2;
color: #fff;
text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.ais-showcase-banner-em {
display: block;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.2em;
margin-top: 4px;
animation: aisBannerEmPulse 2.4s ease-in-out infinite;
}
@keyframes aisBannerEmPulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.ais-showcase-arrow {
display: block;
width: 60px; height: 30px;
margin: 18px auto 0;
filter: drop-shadow(0 0 8px rgba(251,191,36,0.6));
animation: aisArrowSlide 1.6s ease-in-out infinite;
}
@keyframes aisArrowSlide {
0%,100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
/* 태블릿 */
@media (max-width: 1024px) {
.ais-showcase { padding: 72px 0; }
.ais-showcase > .container { padding-left: 5%; padding-right: 5%; }
.ais-showcase-grid { gap: 22px; }
}
/* 모바일 */
@media (max-width: 768px) {
.ais-showcase { padding: 56px 0; }
.ais-showcase > .container { padding-left: 16px; padding-right: 16px; }
.ais-showcase-grid {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 40px;
}
.ais-showcase-card { padding: 18px; }
.ais-showcase-card-badge { font-size: 11px; padding: 4px 11px; top: 12px; right: 12px; }
.ais-showcase-spark { width: 44px; height: 44px; }
.ais-showcase-spark-l { left: 4%; top: 14%; }
.ais-showcase-spark-r { right: 4%; top: 14%; }
.ais-showcase-banner { padding: 40px 16px 32px; }
.ais-showcase-banner-text { font-size: 32px; }
.ais-showcase-deco { width: 320px; height: 320px; }
.ais-showcase-deco-1 { top: -80px; right: -80px; }
.ais-showcase-deco-2 { bottom: -80px; left: -80px; }
}
/* ════════════════════════════════════════════════════════════════
메인 히어로 — 단일 슬라이드 + 우측 YouTube 영상
· 데스크탑: 좌측 카피 + 우측 영상 (영상 강조)
· 모바일/태블릿: 카피 숨김, 영상만 중앙 표시
════════════════════════════════════════════════════════════════ */
.hero-single .swiper-pagination,
.hero-single .swiper-button-prev,
.hero-single .swiper-button-next { display: none !important; }
.hero .slide-with-video {
display: grid;
grid-template-columns: 1fr 1.15fr; /* 영상 영역을 살짝 더 크게 */
gap: 48px;
align-items: center;
}
.hero .slide-with-video .slide-copy {
min-width: 0;
}
.hero .slide-with-video .slide-video {
width: 100%;
max-width: 760px; /* 600 → 760 영상 확대 */
margin-left: auto;
display: flex; flex-direction: column; align-items: center;
}
.hero .slide-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
background: #000;
box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.1);
transition: transform .3s ease, box-shadow .3s ease;
}
.hero .slide-video-frame:hover {
transform: translateY(-3px);
box-shadow: 0 32px 84px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.18);
}
.hero .slide-video-frame iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
display: block;
}
/* ── YouTube 채널 워터마크 마스킹 모두 제거 (영상 깨짐 방지) ──
· ::before / ::after / .yt-mask-* 전부 강제 비활성화
· YouTube modestbranding=1 옵션만으로 워터마크 일부 가림 (그것으로 충분) */
.hero .slide-video-frame::before,
.hero .slide-video-frame::after { content: none !important; display: none !important; }
.hero .slide-video-frame .yt-mask-bl,
.hero .slide-video-frame .yt-mask-tr { display: none !important; }
.hero .slide-video-title {
margin-top: 18px;
padding: 10px 22px;
font-size: 17px;
font-weight: 800;
color: #fff;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.32);
border-radius: 999px;
text-align: center;
letter-spacing: -0.01em;
backdrop-filter: blur(6px);
}
/* PC 큰 화면 — 슬라이드 높이 ↑, 영상 비율 유지 */
@media (min-width: 1280px) {
.hero-single .swiper {
height: clamp(620px, 92vh, 940px); /* 880 → 940 */
height: clamp(620px, 92dvh, 940px);
}
.hero .slide-with-video .slide-video { max-width: 820px; }
}
/* 태블릿/작은 노트북 (≤1199px) — 카피 비율 줄임 */
@media (max-width: 1199px) {
.hero .slide-with-video {
grid-template-columns: 1fr 1.1fr;
gap: 28px;
}
.hero .slide-with-video .slide-video { max-width: 560px; }
}
/* ★ 카피 숨김 기준 확대 — ≤1024px 부터 카피 안 보임, 영상만 중앙 */
@media (max-width: 1024px) {
/* ★ 슬라이드 내부 좌우 padding 무력화 — 영상이 화면 폭 가득 (풀-블리드) */
.hero .slide-inner.slide-with-video {
padding: 0 !important;
}
.hero .slide-with-video {
grid-template-columns: 1fr;
gap: 0;
justify-items: center;
height: 100%;
}
.hero .slide-with-video .slide-copy { display: none !important; }
.hero .slide-with-video .slide-video {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* ★ 모바일 영상 영역 — 추가 -10% (6:7 → 7:8) */
.hero .slide-video-frame {
border-radius: 0;
box-shadow: none;
aspect-ratio: 7 / 8; /* 6/7(≈0.857) → 7/8(=0.875), 컨테이너 높이 추가 -2% */
overflow: hidden;
}
/* ★ 영상 콘텐츠 — scale 1.24 → 1.12 (-10%) */
.hero .slide-video-frame iframe {
width: 100% !important;
height: 100% !important;
transform: scale(1.12);
transform-origin: center center;
}
.hero-single .swiper {
height: auto;
min-height: 518px; /* 576 → 518 (-10%) */
}
.hero-single .slide { padding: 16px 0; }
.hero .slide-video-title {
margin-top: 18px;
font-size: 15px;
padding: 9px 18px;
}
}
/* 모바일 (≤768px) */
@media (max-width: 768px) {
.hero-single .swiper { min-height: 475px; } /* 528 → 475 (-10%) */
.hero-single .slide { padding: 14px 0; }
.hero .slide-video-title {
margin-top: 16px;
font-size: 14px;
padding: 8px 16px;
}
}
/* 중간 모바일 (≤640px) */
@media (max-width: 640px) {
.hero-single .swiper { min-height: 440px; } /* 488 → 440 (-10%) */
}
/* 일반 모바일 (≤480px) */
@media (max-width: 480px) {
.hero-single .swiper { min-height: 390px; } /* 432 → 390 (-10%) */
.hero .slide-video-title { font-size: 13px; padding: 8px 14px; }
}
/* 작은 모바일 (≤420px) — iPhone SE / 갤럭시 작은 모델 */
@media (max-width: 420px) {
.hero-single .swiper { min-height: 360px; } /* 400 → 360 (-10%) */
.hero .slide-video-title { font-size: 12px; padding: 7px 13px; }
}
/* ════════════════════════════════════════════════════════════════
교습소 원장님 필독 영상 페이지 (/page/ai_video)
════════════════════════════════════════════════════════════════ */
.aiv-section {
padding: 50px 0 80px;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.aiv-head {
text-align: center;
margin-bottom: 40px;
}
.aiv-tag {
display: inline-block;
font-size: 12px; font-weight: 700;
letter-spacing: 0.15em;
padding: 6px 16px;
background: #fef3c7;
color: #b45309;
border-radius: 999px;
margin-bottom: 16px;
}
.aiv-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 900;
color: #0f172a;
letter-spacing: -0.02em;
line-height: 1.25;
margin: 0 0 16px;
}
.aiv-sub {
font-size: 17px;
color: #475569;
line-height: 1.7;
margin: 0;
}
.aiv-sub strong { color: #1e3a8a; font-weight: 800; }
/* 영상 플레이어 */
.aiv-player-wrap {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto 48px;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
background: #000;
box-shadow: 0 24px 60px rgba(15,23,42,0.25), 0 0 0 1px rgba(15,23,42,0.08);
}
.aiv-player {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
/* 안내 카드 */
.aiv-info {
max-width: 880px;
margin: 0 auto 48px;
background: #fff;
border-radius: 16px;
padding: 32px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
display: flex; flex-direction: column; gap: 20px;
}
.aiv-info-row {
display: flex; gap: 18px;
padding: 18px;
background: #f8fafc;
border-radius: 12px;
border-left: 4px solid #fbbf24;
}
.aiv-info-row:nth-child(2) { border-left-color: #3b82f6; }
.aiv-info-row:nth-child(3) { border-left-color: #ef4444; }
.aiv-info-ico {
font-size: 28px;
flex-shrink: 0;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
}
.aiv-info-row strong {
display: block;
font-size: 17px;
font-weight: 800;
color: #0f172a;
margin-bottom: 6px;
}
.aiv-info-row p {
font-size: 15px;
color: #475569;
line-height: 1.7;
margin: 0;
}
.aiv-info-row p strong {
display: inline;
font-size: inherit;
color: #ef4444;
margin: 0;
}
/* CTA */
.aiv-cta-wrap {
display: flex; justify-content: center; gap: 14px;
max-width: 720px; margin: 0 auto;
flex-wrap: wrap;
}
.aiv-cta {
display: inline-flex; align-items: center; justify-content: center;
padding: 16px 28px;
font-size: 16px; font-weight: 700;
border-radius: 12px;
text-decoration: none;
transition: all .2s;
min-height: 56px;
}
.aiv-cta-primary {
background: linear-gradient(135deg, #f59e0b, #ea580c);
color: #fff;
box-shadow: 0 8px 20px rgba(245,158,11,0.35);
}
.aiv-cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(245,158,11,0.45);
color: #fff;
}
.aiv-cta-outline {
background: #fff;
color: #1e3a8a;
border: 2px solid #1e3a8a;
}
.aiv-cta-outline:hover {
background: #1e3a8a;
color: #fff;
transform: translateY(-2px);
}
/* 모바일 */
@media (max-width: 768px) {
.aiv-section { padding: 32px 0 56px; }
.aiv-head { margin-bottom: 24px; }
.aiv-sub { font-size: 15px; }
.aiv-player-wrap { margin-bottom: 28px; border-radius: 10px; }
.aiv-info { padding: 20px 18px; margin-bottom: 28px; gap: 14px; }
.aiv-info-row { padding: 14px; gap: 12px; }
.aiv-info-ico { width: 36px; height: 36px; font-size: 22px; }
.aiv-info-row strong { font-size: 15px; }
.aiv-info-row p { font-size: 14px; line-height: 1.6; }
.aiv-cta-wrap { flex-direction: column; gap: 10px; }
.aiv-cta { width: 100%; font-size: 15px; padding: 14px 20px; }
}