/* =========================================================
DOOITSURVEY – Consolidated Global Styles
- Duplicates removed; unified form controls & page scopes
- Keep on subpages
========================================================= */
/* ------------------------------
Reset & Base
------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--brand: #1c55ff;
--text: #333;
--text-strong: #222;
--muted: #6b7280;
/* chip/select/input theme */
--chip-bg: #f7f7f9;
--chip-border: #e5e7eb;
--chip-hover-bg: #f2f4f8;
--chip-hover-border: #d7dbe3;
--chip-active-bg: #eef2ff;
--chip-active-border: #c6cff7;
--chip-active-text: #133aa6;
--control-h: 44px;
--radius: 12px;
--ring: 0 0 0 3px rgba(28,85,255,.15);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--text);
line-height: 1.6;
}
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
/* ------------------------------
Header
------------------------------ */
header {
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky; top: 0; z-index: 1000;
}
.header-inner {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 40px; max-width: 1400px; margin: 0 auto;
}
.logo { font-size: 28px; font-weight: bold; color: var(--brand); text-decoration: none; }
nav ul {
display: flex; list-style: none; gap: 40px;
transition: max-height .3s ease, opacity .3s ease;
}
nav a { color: #333; text-decoration: none; font-size: 16px; font-weight: 500; transition: color .3s; }
nav a:hover { color: var(--brand); }
.auth-buttons { display: flex; gap: 15px; }
.btn { padding: 10px 25px; border-radius: 25px; text-decoration: none; font-weight: 500; transition: all .3s; }
.btn-login { color: #333; border: 1px solid #ddd; }
.btn-login:hover { border-color: var(--brand); color: var(--brand); }
.btn-signup { background: var(--brand); color: #fff; border: none; }
.btn-signup:hover { background: #0d3dbf; }
/* Hamburger */
.menu-toggle { display: none; width: 30px; height: 25px; position: relative; border: none; background: none; cursor: pointer; }
.menu-toggle span { display: block; width: 100%; height: 3px; background: #333; border-radius: 3px; position: absolute; left: 0; transition: all .3s ease; }
.menu-toggle span:nth-child(1){ top:0; } .menu-toggle span:nth-child(2){ top:11px; } .menu-toggle span:nth-child(3){ bottom:0; }
.menu-toggle.active span:nth-child(1){ transform: rotate(45deg); top:11px; }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform: rotate(-45deg); bottom:11px; }
/* ------------------------------
Hero / Banner (home)
------------------------------ */
.banner-slider { position: relative; height: 600px; overflow: hidden; }
.banner-slide {
position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out;
display: flex; align-items: center; justify-content: center;
background-size: cover; background-position: center; background-repeat: no-repeat;
}
.banner-slide.active { opacity: 1; }
.banner-slide::before { content:""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.banner-content { position: relative; text-align: center; color: #ffffff; padding: 40px; }
.banner-subtitle { font-size: 18px; margin-bottom: 15px; opacity: .9; }
.banner-title { font-size: 52px; font-weight: bold; margin-bottom: 20px; line-height: 1.3; }
.banner-desc { font-size: 20px; opacity: .9; }
/* ------------------------------
Sections (home)
------------------------------ */
section { padding: 100px 0; }
.section-title { font-size: 42px; font-weight: bold; text-align: center; margin-bottom: 20px; }
.section-subtitle { font-size: 18px; text-align: center; color: #fff; margin-bottom: 60px; }
/* News */
.news-section { background: #f8f9fa; }
.news-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
.news-main-title { font-size: 42px; font-weight: bold; color: #333; }
.news-controls { display: flex; align-items: center; gap: 20px; }
.news-btn-all {
padding: 12px 30px; background: #fff; border: 1px solid #ddd; border-radius: 25px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all .3s;
}
.news-btn-all:hover { border-color: var(--brand); color: var(--brand); }
.news-arrows { display: flex; gap: 10px; }
.news-arrow-btn {
width: 45px; height: 45px; border-radius: 50%; border: none; background: #333; color: #fff; font-size: 24px;
cursor: pointer; transition: all .3s; display: flex; align-items: center; justify-content: center;
}
.news-arrow-btn:hover { background: var(--brand); transform: scale(1.1); }
.news-slider { display: flex; gap: 25px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 20px; }
.news-slider::-webkit-scrollbar { display: none; }
.news-card { min-width: 340px; background: #fff; border-radius: 15px; overflow: hidden; cursor: pointer; transition: transform .3s; }
.news-card:hover { transform: translateY(-10px); }
.news-image { width: 100%; height: 240px; position: relative; overflow: hidden; background: #000; }
.news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card:hover .news-image img { transform: scale(1.1); }
.video-card { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); display:flex; align-items:center; justify-content:center; }
.play-button { position: absolute; width:60px; height:60px; background: rgba(255,255,255,.3); border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; z-index:2; }
.news-overlay-text { position: absolute; color:#fff; font-size:36px; font-weight:bold; text-align:center; line-height:1.3; }
.news-hashtags { position:absolute; top:15px; right:15px; display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.news-hashtags span { background: rgba(0,0,0,.6); color:#fff; padding:5px 12px; border-radius:15px; font-size:12px; font-weight:500; }
.news-meta { display:flex; gap:10px; padding:20px 20px 10px; font-size:14px; }
.news-category { color: var(--brand); font-weight: 500; }
.news-date { color: #999; }
.news-title { padding: 0 20px 25px; font-size: 18px; font-weight: 600; line-height: 1.5; color: #333; }
/* Results (home dark) */
.results-section { background:#1a1a1a; overflow:hidden; }
.container-full { max-width: 100%; }
.results-header { max-width: 1400px; margin: 0 auto; padding: 0 40px; margin-bottom: 60px; }
.results-title { font-size: 48px; font-weight: bold; color: #fff; line-height: 1.4; margin-bottom: 20px; }
.results-subtitle { font-size: 14px; color: #888; letter-spacing: 2px; }
.results-slider-wrapper { position: relative; max-width: 1600px; margin: 0 auto; padding: 0 80px; }
.results-slider { display:flex; gap:30px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding:20px 40px; }
.results-slider::-webkit-scrollbar { display: none; }
.result-card { min-width:380px; height:520px; border-radius:30px; padding:50px 40px; display:flex; flex-direction:column; position:relative; transition: transform .3s; }
.result-card:hover { transform: translateY(-10px); }
.card-dark { background:#2d2d2d; color:#fff; } .card-blue{ background:#4385ff; color:#fff; }
.card-light { background:#f5f5f5; color:#333; } .card-yellow{ background:#ffd600; color:#333; }
.result-card h3{ font-size:28px; font-weight:bold; margin-bottom:20px; z-index:2; }
.result-card p{ font-size:16px; line-height:1.6; margin-bottom:auto; z-index:2; }
.card-image{ width:100%; height:200px; border-radius:15px; overflow:hidden; margin-top:30px; }
.card-image img{ width:100%; height:100%; object-fit:cover; }
.slider-btn {
position:absolute; top:50%; transform:translateY(-50%);
background: rgba(255,255,255,.9); border:none; width:50px; height:50px; border-radius:50%;
font-size:30px; cursor:pointer; z-index:10; transition: all .3s; color:#333;
}
.slider-btn:hover{ background:#fff; box-shadow:0 5px 20px rgba(0,0,0,.3); }
.prev-btn{ left:20px; } .next-btn{ right:20px; }
/* Panel & Services */
.panel-section{ background:#f8f9fa; }
.panel-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:30px; }
.panel-card{
background:#fff; border-radius:20px; padding:40px; text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,.08); transition: transform .3s;
}
.panel-card:hover{ transform: translateY(-10px); }
.panel-icon{ width:80px; height:80px; background:var(--brand); border-radius:50%; margin:0 auto 25px;
display:flex; align-items:center; justify-content:center; font-size:40px; color:#fff; }
.panel-card h3{ font-size:24px; margin-bottom:15px; } .panel-card p{ color:#666; line-height:1.8; }
.service-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:40px; max-width:1200px; margin:0 auto; }
.service-card{
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
border-radius:20px; padding:50px; color:#fff; position:relative; overflow:hidden;
}
.service-card:nth-child(2){ background: linear-gradient(135deg,#f093fb 0%,#f5576c 100%); }
.service-card:nth-child(3){ background: linear-gradient(135deg,#4facfe 0%,#00f2fe 100%); }
.service-card:nth-child(4){ background: linear-gradient(135deg,#43e97b 0%,#38f9d7 100%); }
.service-card h3{ font-size:28px; margin-bottom:20px; } .service-card p{ font-size:16px; line-height:1.8; opacity:.95; }
/* CTA */
.cta-section{ background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; text-align:center; }
.cta-buttons{ display:flex; gap:20px; justify-content:center; margin-top:40px; }
.btn-large{ padding:18px 45px; font-size:18px; border-radius:30px; text-decoration:none; font-weight:600; transition: all .3s; }
.btn-white{ background:#fff; color:#667eea; } .btn-white:hover{ transform:scale(1.05); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.btn-outline{ background:transparent; color:#fff; border:2px solid #fff; } .btn-outline:hover{ background:#fff; color:#667eea; }
/* Clients + Logos */
.clients-section{ background:#fff; padding:100px 0 80px; text-align:center; overflow:hidden; }
.clients-title{ font-size:42px; font-weight:bold; line-height:1.4; margin-bottom:30px; color:#333; }
.clients-btn{
display:inline-block; text-decoration:none; padding:15px 40px; background:#333; color:#fff; border:none;
border-radius:30px; font-size:16px; font-weight:600; cursor:pointer; transition: all .3s; margin-bottom:60px;
}
.clients-btn:hover{ background:var(--brand); transform: translateY(-2px); box-shadow:0 5px 20px rgba(28,85,255,.3); text-decoration:none; }
.logo-slider{ width:100%; overflow:hidden; background:#fff; padding:20px 0; }
.logo-track{ display:flex; gap:60px; animation: scroll 30s linear infinite; width: fit-content; }
.logo-item{ display:flex; align-items:center; justify-content:center; min-width:150px; height:60px; }
.logo-item img{ max-width:150px; height:auto; opacity:.7; transition: opacity .3s; }
.logo-item:hover img{ opacity:1; }
@keyframes scroll{ 0%{ transform: translateX(0);} 100%{ transform: translateX(-50%);} }
.logo-slider:hover .logo-track{ animation-play-state: paused; }
/* ------------------------------
Footer
------------------------------ */
footer{ background:#2c3e50; color:#fff; padding:60px 0 30px; }
.footer-content{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:60px; margin-bottom:40px; }
.footer-about h3{ font-size:24px; margin-bottom:20px; }
.footer-about p{ line-height:1.8; opacity:.9; }
.footer-links h4{ font-size:18px; margin-bottom:20px; }
.footer-links ul{ list-style:none; } .footer-links li{ margin-bottom:12px; }
.footer-links a{ color:#fff; text-decoration:none; opacity:.8; transition: opacity .3s; }
.footer-links a:hover{ opacity:1; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); padding-top:30px; text-align:center; opacity:.7; }
/* ------------------------------
Responsive (global)
------------------------------ */
@media (max-width: 768px) {
.header-inner{ flex-direction: row; gap:0; }
nav ul{
position:absolute; top:70px; right:20px; flex-direction:column; gap:15px; background:#fff; padding:20px;
border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.1); max-height:0; opacity:0; overflow:hidden;
}
nav ul.active{ max-height:500px; opacity:1; }
.menu-toggle{ display:block; }
.auth-buttons{ display:none; }
.banner-title{ font-size:32px; }
.panel-grid, .service-grid{ grid-template-columns:1fr; }
.footer-content{ grid-template-columns:1fr; gap:40px; }
.cta-buttons{ flex-direction:column; align-items:center; }
.news-header{ flex-direction:column; align-items:flex-start; gap:20px; }
.news-main-title{ font-size:28px; }
.clients-title{ font-size:28px; }
.logo-track{ gap:40px; }
.results-section{ padding:60px 0; }
.results-title{ font-size:28px; line-height:1.4; }
.results-slider-wrapper{ padding:0 20px; }
.results-slider{ gap:15px; padding:10px; }
.result-card{ min-width:260px; height:auto; padding:25px 20px; border-radius:20px; }
.result-card h3{ font-size:20px; margin-bottom:10px; }
.result-card p{ font-size:14px; line-height:1.5; }
.card-image{ height:150px; margin-top:15px; }
.slider-btn{ width:40px; height:40px; font-size:22px; }
}
/* ==============================
Sub Hero (공통)
모든 서브페이지에 동일한 디자인 적용
================================ */
.sub-hero {
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color: #fff;
text-align: center;
padding: 100px 20px;
}
.sub-hero h1 {
font-size: 42px;
margin-bottom: 15px;
font-weight: 800;
}
.sub-hero p {
font-size: 18px;
opacity: .9;
margin: 0;
}
/* =========================================================
Subpages – Scoped Themes
========================================================= */
/* ---------- Contact (survey request) ---------- */
.contact-page .sub-hero{
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
color:#fff; text-align:center; padding:100px 20px;
}
.contact-page .sub-hero h1{ font-size:42px; margin-bottom:15px; }
.contact-page .sub-hero p{ font-size:18px; opacity:.9; }
.contact-page .form-section{ padding:80px 0; background:#f8f9fa; }
.contact-page .form-box{
background:#fff; border-radius:20px; padding:50px; max-width:900px; margin:0 auto; box-shadow:0 5px 25px rgba(0,0,0,.08);
}
.contact-page .form-box h2{ font-size:28px; margin-bottom:40px; text-align:center; font-weight:bold; }
.contact-page .form-group{ margin-bottom:25px; }
.contact-page .form-label{ display:block; font-weight:600; margin-bottom:10px; font-size:16px; }
.contact-page .service-list{ display:flex; flex-wrap:wrap; gap:12px; }
.contact-page .service-item{ display:flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid #ddd; border-radius:30px; font-size:14px; background:#fafafa; cursor:pointer; }
.contact-page .service-item input{ accent-color: var(--brand); }
.contact-page .inline-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.contact-page .short{ width:90px; padding:10px; border:1px solid #ddd; border-radius:8px; }
.contact-page select{ padding:10px; border:1px solid #ddd; border-radius:8px; background:#fff; }
.contact-page .file-box{ border:2px dashed var(--brand); padding:20px; border-radius:12px; background:#f0f5ff; }
.contact-page .file-box input[type="file"]{ margin-bottom:10px; }
.contact-page .file-box small{ display:block; margin-top:5px; color:#555; }
.contact-page .privacy-box{ background:#f5f5f5; padding:20px; border-radius:10px; font-size:14px; line-height:1.6; margin-bottom:15px; }
.contact-page .radio-row{ display:flex; justify-content:center; gap:30px; font-weight:600; }
.contact-page .radio-row input{ margin-right:6px; accent-color: var(--brand); }
.contact-page .btn-submit{ display:block; width:100%; padding:16px; border:none; border-radius:30px; background: var(--brand); color:#fff; font-size:18px; font-weight:600; cursor:pointer; transition: all .3s; }
.contact-page .btn-submit:hover{ background:#0d3dbf; }
@media (max-width:768px){
.contact-page .sub-hero{ padding:70px 16px; }
.contact-page .sub-hero h1{ font-size:32px; }
.contact-page .sub-hero p{ font-size:16px; }
.contact-page .form-box{ padding:30px 20px; border-radius:16px; }
}
/* ---------- Pricing ---------- */
.pricing-page .sub-hero{
background: linear-gradient(135deg,#1c55ff 0%,#4a76ff 100%);
color:#fff; text-align:center; padding:80px 20px;
}
.pricing-page .sub-hero h1{ font-size:42px; margin-bottom:10px; }
.pricing-page .sub-hero p{ opacity:.9; }
.pricing-page .pricing-section{ padding:80px 0; }
.pricing-page .pricing-section .section-title{ text-align:center; font-size:28px; margin-bottom:30px; font-weight:700; }
.pricing-page .pricing-section .container{ max-width:1100px; margin:0 auto; }
.pricing-page table{
width:100%; border-collapse:collapse; margin-bottom:40px; background:#fff; border-radius:12px; overflow:hidden;
box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.pricing-page th, .pricing-page td{ padding:14px 18px; border-bottom:1px solid #eee; text-align:center; font-size:15px; }
.pricing-page th{ background:#f0f4ff; font-weight:600; }
.pricing-page tr:last-child td{ border-bottom:none; }
.pricing-page .estimate-box{ background:#fff; padding:40px; border-radius:16px; box-shadow:0 6px 25px rgba(0,0,0,.08); }
.pricing-page .estimate-box h3{ font-size:22px; font-weight:700; margin-bottom:20px; text-align:center; }
.pricing-page .form-group{ margin-bottom:20px; }
.pricing-page .form-label{ display:block; font-weight:600; margin-bottom:8px; }
.pricing-page .form-control{
width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:15px; text-align:right; background:#fff;
}
.pricing-page .unit-price{ margin-top:8px; font-size:14px; color:#555; }
.pricing-page .total-price{ font-size:22px; font-weight:700; color: var(--brand); text-align:right; margin-top:20px; }
.pricing-page .note-text{ padding:8px 0; color:#555; }
.pricing-page .muted{ color:#888; font-size:14px; }
.pricing-page .btn-submit{ display:block; width:100%; padding:14px; border:none; border-radius:30px; background: var(--brand); color:#fff; font-size:17px; font-weight:600; cursor:pointer; margin-top:30px; transition: background .2s; }
.pricing-page .btn-submit:hover{ background:#0d3dbf; }
@media (max-width:768px){
.pricing-page .sub-hero{ padding:60px 16px; }
.pricing-page .sub-hero h1{ font-size:32px; }
.pricing-page .pricing-section{ padding:56px 0; }
.pricing-page .estimate-box{ padding:28px 20px; }
.pricing-page th, .pricing-page td{ padding:12px; font-size:14px; }
}
/* ---------- Join (join1/2/3 공통) ---------- */
.join-page .page-banner{
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
padding:60px 0; text-align:center; color:#fff;
}
.join-page .page-banner h1{ font-size:42px; font-weight:bold; margin-bottom:10px; }
.join-page .breadcrumb{ font-size:14px; opacity:.9; } .join-page .breadcrumb span{ color:#fff; }
.join-page .join-section{ padding:80px 0; max-width:900px; margin:0 auto; }
.join-page .section-title{
font-size:24px; font-weight:bold; color:#333; margin-bottom:30px; padding-bottom:15px; border-bottom:2px solid var(--brand);
}
/* Card group */
.join-page .form-group{
background:#fff; border-radius:15px; padding:40px; margin-bottom:30px; box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.join-page .form-row{ margin-bottom:30px; }
.join-page .form-row label, .join-page .input-group label{ display:block; font-size:16px; font-weight:600; color:#333; margin-bottom:10px; }
/* Info/Notice */
.join-page .info-box{ border:2px solid var(--brand); padding:20px; border-radius:8px; margin-bottom:15px; background:#f0f5ff; }
.join-page .info-box p{ margin:5px 0; font-size:14px; line-height:1.8; }
.join-page .info-box strong{ color: var(--brand); }
.join-page .info-box a{ color: var(--brand); text-decoration: underline; }
.join-page .checkbox-group{
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
background: transparent;
padding: 0;
border-radius: 8px; /* 필요시 카드 안 레이아웃 유지용 */
}
.join-page .checkbox-group label{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
height: var(--control-h);
border: 1px solid var(--chip-border);
border-radius: 9999px;
background: var(--chip-bg);
font-size: 16px;
font-weight: 700;
color: var(--text-strong);
cursor: pointer;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.join-page .checkbox-group input[type="checkbox"]{
width: 18px; height: 18px; margin: 0; flex-shrink: 0;
accent-color: var(--brand);
}
.join-page .checkbox-group label:hover{
background: var(--chip-hover-bg);
border-color: var(--chip-hover-border);
}
.join-page .checkbox-group label:has(input:checked){
border-color: var(--chip-active-border);
background: var(--chip-active-bg);
color: var(--chip-active-text);
box-shadow: 0 6px 18px rgba(28,85,255,.12);
}
/* Phone / Real-name */
.join-page .real-name-form{ background:#fff; padding:30px; border-radius:10px; border:1px solid #e0e0e0; }
.join-page .input-group{ margin-bottom:20px; }
.join-page .input-group input[type="text"], .join-page .input-group select{
padding:12px 15px; border:1px solid #ddd; border-radius:6px; font-size:15px; transition: border-color .3s; background:#fff;
}
.join-page .input-group input[type="text"]:focus, .join-page .input-group select:focus{ outline:none; border-color: var(--brand); }
.join-page .input-group input.width100{ width:200px; }
.join-page .phone-input{ display:flex; gap:8px; align-items:center; }
.join-page .phone-input select{ width:80px; } .join-page .phone-input input{ width:80px; }
/* Join buttons/alerts */
.join-page .btn-sms-request{
padding:12px 25px; background: var(--brand); color:#fff; border:none; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; transition: all .3s; text-decoration:none; display:inline-block;
}
.join-page .btn-sms-request:hover{ background:#0d3dbf; transform: translateY(-2px); }
.join-page .notice-text{ color:#e74c3c; font-size:14px; margin:15px 0; font-weight:500; }
.join-page .btn-submit{
width:200px; padding:15px 0; background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; border:none; border-radius:30px; font-size:18px; font-weight:600; cursor:pointer; transition: all .3s; margin:40px auto 0; display:block;
}
.join-page .btn-submit:hover{ transform: translateY(-2px); box-shadow:0 10px 30px rgba(102,126,234,.4); }
.join-page .text-center{ text-align:center; }
.join-page #sms_code_wrap{ display:none; }
.join-page .mt-10{ margin-top:10px; } .join-page .mt-20{ margin-top:20px; } .join-page .flex{ display:flex; } .join-page .gap-10{ gap:10px; } .join-page .w-200{ width:200px; } .join-page .code_msg{ color:#e74c3c; margin-top:20px; }
@keyframes join-spin{ 0%{ transform: rotate(0);} 100%{ transform: rotate(360deg);} }
.join-page .loading{
display:none; position:fixed; inset:0; background: rgba(0,0,0,.5); z-index:9999; align-items:center; justify-content:center;
}
.join-page .loading.active{ display:flex; }
.join-page .loading-spinner{ width:50px; height:50px; border:5px solid #f3f3f3; border-top:5px solid var(--brand); border-radius:50%; animation: join-spin 1s linear infinite; }
@media (max-width:768px){
.join-page .page-banner h1{ font-size:28px; }
.join-page .form-group{ padding:20px; }
.join-page .phone-input{ flex-wrap:wrap; }
.join-page .btn-submit{ width:100%; }
}
/* =========================================================
Unified Form Controls (global helpers + join-page scope)
========================================================= */
/* Inputs / Textarea / Select (global helper classes under .join-page scope too) */
.join-page input[type="text"],
.join-page input[type="password"],
.join-page input[type="email"],
.join-page input[type="number"]{
width:100%; max-width:640px; height: var(--control-h);
padding: 0 14px; border:1px solid #e5e7eb; border-radius: var(--radius);
font-size:16px; line-height:1.4; background:#fff; transition: border-color .2s, box-shadow .2s;
}
.join-page textarea{
width:100%; max-width:100%; min-height:160px; padding:14px 16px; border:1px solid #ddd; border-radius:8px;
font-size:16px; line-height:1.6; resize: vertical; background:#fff; transition: border-color .2s, box-shadow .2s;
}
.join-page input:focus, .join-page textarea:focus{ outline:none; border-color: var(--brand); box-shadow: var(--ring); }
/* Select */
.join-page select{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
height: var(--control-h);
padding: 0 42px 0 14px;
border:1px solid #e5e7eb; border-radius: var(--radius);
font-size:16px; color: var(--text-strong); background:#fff;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position: right 14px center; background-size:16px 16px;
transition: border-color .2s, box-shadow .2s;
}
.join-page select:focus{ outline:none; border-color: var(--brand); box-shadow: var(--ring); }
.join-page select:disabled{ background:#f3f4f6; color:#9ca3af; cursor:not-allowed; }
/* Inline helpers */
.join-page .inline-inputs{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.join-page .w-80{ width:80px !important; } .join-page .w-90{ width:90px !important; } .join-page .w-100{ width:100px !important; } .join-page .w-200{ width:200px !important; }
/* 라디오/체크를 칩(알약) 스타일로 강제 – inline-options 컨테이너 */
.join-page .inline-options{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.join-page .inline-options label{
display: inline-flex;
align-items: center;
gap: 10px; /* 아이콘-텍스트 간격 */
padding: 10px 16px;
height: var(--control-h);
border: 1px solid var(--chip-border);
border-radius: 9999px;
background: var(--chip-bg);
color: var(--text-strong);
font-size: 16px;
font-weight: 700;
line-height: 1;
cursor: pointer;
user-select: none;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.join-page .inline-options input[type="radio"],
.join-page .inline-options input[type="checkbox"]{
width: 18px; height: 18px; margin: 0; flex-shrink: 0;
accent-color: var(--brand);
}
.join-page .inline-options label:hover{
background: var(--chip-hover-bg);
border-color: var(--chip-hover-border);
}
.join-page .inline-options label:has(input:checked){
border-color: var(--chip-active-border);
background: var(--chip-active-bg);
color: var(--chip-active-text);
box-shadow: 0 6px 18px rgba(28,85,255,.12);
}
/* Long fixed width input (400px) */
.input-400{
width:400px; max-width:100%;
padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-size:16px; line-height:1.4; background:#fff;
transition: border-color .2s, box-shadow .2s;
}
.input-400:focus{ border-color: var(--brand); box-shadow: var(--ring); outline:none; }
/* Choice – inline text radios/checkboxes */
.choice-inline{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.choice-inline label{ display:inline-flex; align-items:center; gap:8px; font-size:16px; }
.choice-inline input[type="radio"], .choice-inline input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--brand); }
/* Chip controls (works with .chip-group or existing .service-list) */
.chip-group, .service-list{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.chip, .service-item{
display:inline-flex; align-items:center; gap:10px; padding:10px 16px; height: var(--control-h);
border:1px solid var(--chip-border); border-radius:9999px; background: var(--chip-bg); color: var(--text-strong);
font-size:16px; font-weight:700; line-height:1; cursor:pointer; user-select:none; transition: background .15s, border-color .15s, box-shadow .15s;
}
.chip:hover, .service-item:hover{ background: var(--chip-hover-bg); border-color: var(--chip-hover-border); }
.chip input[type="radio"], .chip input[type="checkbox"],
.service-item input[type="radio"], .service-item input[type="checkbox"]{
width:18px; height:18px; accent-color: var(--brand); margin:0; flex-shrink:0;
}
.chip:has(input:checked), .service-item:has(input:checked){
border-color: var(--chip-active-border); background: var(--chip-active-bg); color: var(--chip-active-text);
box-shadow: 0 6px 18px rgba(28,85,255,.12);
}
/* (Optional legacy support) .is-checked class for no-:has() browsers */
.chip.is-checked, .service-item.is-checked{
border-color: var(--chip-active-border); background: var(--chip-active-bg); color: var(--chip-active-text);
box-shadow: 0 6px 18px rgba(28,85,255,.12);
}
/* =========================================
Auth – stacked inputs (brand blue)
========================================= */
/* 스크린리더 전용 라벨 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.auth-page .stacked-inputs{
border:1px solid #e5e7eb;
border-radius:16px;
overflow:hidden;
background:#fff;
}
.auth-page .stacked-inputs .stack-item{
position:relative;
display:flex;
align-items:center;
}
.auth-page .stacked-inputs .stack-item + .stack-item{
border-top:1px solid #eef0f5; /* 내부 구분선 */
}
.auth-page .stacked-inputs input{
width:100%;
height:56px; /* 살짝 더 넉넉하게 */
border:0;
padding:0 48px 0 16px; /* 오른쪽 아이콘 공간 */
font-size:17px;
background:#fff;
}
.auth-page .stacked-inputs input::placeholder{ color:#9aa1ae; }
.auth-page .stacked-inputs input:focus{
outline:none;
box-shadow: inset 0 0 0 2px rgba(28,85,255,.2);
}
/* 아이콘 버튼(우측) */
.auth-page .icon-btn{
position:absolute; right:10px; top:50%; transform:translateY(-50%);
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
border:0; background:#f1f3f9; color:#6b7280;
cursor:pointer; font-size:14px;
}
.auth-page .icon-btn + .icon-btn{ right:46px; } /* 비번칸: 눈 + X 두 개 배치 */
.auth-page .icon-btn:hover{ filter:brightness(.97); }
/* 옵션/버튼 영역 */
.auth-page .actions-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.auth-page .btn-primary.lg{
height:56px; min-width:180px; padding:0 24px;
background:#1c55ff; /* 브랜드 블루 */
color:#fff; border:none; border-radius:12px; font-weight:800; font-size:18px;
box-shadow:0 10px 24px rgba(28,85,255,.25);
transition:transform .12s, box-shadow .2s, background .2s;
}
.auth-page .btn-primary.lg:hover{ background:#1243d6; transform:translateY(-1px); }
/* 하단 얇은 링크 줄 */
.auth-page .login-links.slim{ padding:12px 0 0; }
.auth-page .muted-links{ color:#9aa1ae; display:flex; gap:12px; align-items:center; }
.auth-page .muted-links a{ color:#1c55ff; font-weight:700; text-decoration:underline; }
.auth-page .muted-links .sep{ color:#c1c6d4; }
@media (max-width:768px){
.auth-page .btn-primary.lg{ width:100%; }
.auth-page .actions-row{ flex-direction:column; align-items:stretch; }
}
/* =======================================================
Result List (썸네일 + 텍스트 나란히) — scope: .join-page.result-list-page
카드/칩/버튼/히어로/컨테이너는 공통 규칙을 그대로 재사용
======================================================= */
/* 목록 래퍼 */
.join-page.result-list-page .issue-list{
list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px;
}
/* 한 줄(썸네일+본문) */
.join-page.result-list-page .issue-row{
display:flex; gap:16px;
background:#fff; border:1px solid var(--line, #e5e7eb);
border-radius:12px; overflow:hidden;
box-shadow:0 6px 24px rgba(0,0,0,.06);
padding:12px;
}
/* 썸네일: 큰 비율 */
.join-page.result-list-page .issue-row .thumb{
flex:0 0 280px; /* 썸네일 너비 */
display:block; border-radius:8px; overflow:hidden; background:var(--bg-soft, #f8fafc);
}
.join-page.result-list-page .issue-row .thumb img{
width:100%; height:100%; object-fit:cover; display:block;
aspect-ratio: 4 / 3; /* 넉넉한 큰 이미지 */
}
/* 본문 */
.join-page.result-list-page .issue-row .body{ flex:1; display:flex; flex-direction:column; gap:6px; }
.join-page.result-list-page .issue-row .title{ font-size:18px; font-weight:700; margin:0; line-height:1.35; }
.join-page.result-list-page .issue-row .title a{ color:var(--ink-1, #0f172a); text-decoration:none; }
.join-page.result-list-page .issue-row .title a:hover{ text-decoration:underline; }
.join-page.result-list-page .issue-row .desc{ font-size:14px; color:var(--ink-2, #334155); line-height:1.55; margin:0; }
/* 메타 라인 */
.join-page.result-list-page .issue-row .meta{
display:flex; flex-wrap:wrap; gap:14px;
font-size:13px; color:var(--ink-3, #64748b);
margin-top:8px; margin-bottom:2px;
list-style:none; padding:0;
}
.join-page.result-list-page .issue-row .meta li{ display:flex; gap:6px; }
/* 호버 피드백(선택) */
.join-page.result-list-page .issue-row:hover{
box-shadow:0 10px 30px rgba(2,6,23,.10);
transform:translateY(-1px);
transition: box-shadow .2s ease, transform .1s ease;
}
/* 반응형 */
@media (max-width: 1024px){
.join-page.result-list-page .issue-row .thumb{ flex-basis: 220px; }
}
@media (max-width: 768px){
.join-page.result-list-page .issue-row{ flex-direction:column; }
.join-page.result-list-page .issue-row .thumb{ flex-basis:auto; }
.join-page.result-list-page .issue-row .thumb img{ aspect-ratio: 16 / 9; }
}
/* 공용 버튼 (44px 규격) */
.btn-44 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 80px;
height: 44px;
padding: 0 18px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
border: 1px solid var(--line,#e5e7eb);
background: #fff;
color: var(--ink-1,#0f172a);
cursor: pointer;
transition: all .2s ease;
}
.btn-44:hover {
background: var(--bg-soft,#f8fafc);
}
.btn-44.primary {
background: var(--brand,#2563eb);
border-color: var(--brand,#2563eb);
color: #fff;
}
.btn-44.primary:hover {
filter: brightness(.95);
}
.btn-44.ghost {
background: #fff;
color: var(--ink-1,#0f172a);
}
/* 페이지네이션 공통 스타일 */
.pagination {
display: flex;
justify-content: center; /* 가운데 정렬 */
align-items: center;
gap: 12px;
margin-top: 40px; /* 위와 간격 벌려주기 */
}
.pagination .page-indicator {
font-size: 14px;
color: var(--ink-2,#334155);
}
/* =======================================================
Report Page Hook (프로그램 보존 + 현대적 스킨)
scope: .report-page
======================================================= */
/* 페이지 표면 */
.report-page .report-surface{
padding: 28px 0 48px;
}
/* 상단 로고 영역 정리 */
.report-page #survey_result .logo { display:none; } /* 헤더가 있으니 숨김 */
/* 탭(이미지 -> 텍스트 버튼화) */
.report-page .report_tap ul{display:flex;gap:8px;list-style:none;margin:0 0 16px;padding:0}
.report-page .report_tap li a{
position:relative; display:inline-flex; align-items:center; justify-content:center;
height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line,#e5e7eb);
background:#fff; color:var(--ink-1,#0f172a); font-weight:700; text-decoration:none;
box-shadow:0 2px 10px rgba(2,6,23,.06);
}
.report-page .report_tap li a img{ display:none; }
.report-page .report_tap li:nth-child(1) a::after{ content:"설문결과"; }
.report-page .report_tap li:nth-child(2) a::after{ content:"교차분석"; }
.report-page .report_tap li:nth-child(3) a::after{ content:"다중 독립분석"; }
.report-page .report_tap li:nth-child(4) a::after{ content:"응답별 분석"; }
/* on/off 감지: _on.gif 가 들어간 탭을 강조 (현대 브라우저 :has 지원) */
.report-page .report_tap li a:has(img[src*="_on"]){
background: var(--brand,#2563eb);
border-color: var(--brand,#2563eb);
color:#fff;
}
/* 카드 표면 */
.report-page .survey_data{
background:#fff; border:1px solid var(--line,#e5e7eb);
border-radius:16px; box-shadow:0 10px 30px rgba(2,6,23,.08);
padding:20px;
}
/* 섹션 타이틀 이미지 대체 */
.report-page .Q_title{margin:16px 0 10px}
.report-page .Q_title img{display:none}
.report-page .Q_title::before{
content:""; display:block; height:1px; background:var(--line,#e5e7eb); margin:8px 0;
}
.report-page .Q_title::after{
content:""; display:block; height:0;
}
/* 설문 정보 요약 */
.report-page .survey_title{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px}
.report-page .survey_title dl{display:flex; gap:8px; margin:0; padding:10px; border:1px solid var(--line,#e5e7eb); border-radius:12px; background:var(--bg-soft,#f8fafc)}
.report-page .survey_title dt{color:var(--ink-3,#64748b); min-width:90px}
.report-page .survey_title dd{margin:0; font-weight:700; color:var(--ink-1,#0f172a)}
@media (max-width:768px){ .report-page .survey_title{grid-template-columns:1fr} }
/* 인구통계 토글 버튼(이미지 -> 텍스트) */
.report-page #btn_personal_show img,
.report-page #btn_personal_hide img{ display:none; }
.report-page #btn_personal_show::after{ content:"펼치기"; }
.report-page #btn_personal_hide::after{ content:"접기"; }
.report-page #btn_personal_show,
.report-page #btn_personal_hide{
display:inline-flex; align-items:center; justify-content:center;
height:36px; padding:0 12px; border-radius:8px; border:1px solid var(--line,#e5e7eb);
background:#fff; color:var(--ink-1,#0f172a); text-decoration:none; font-weight:700;
}
/* 표(테이블) 스킨 */
.report-page .survey_content table{
width:100%; border-collapse:separate; border-spacing:0;
border:1px solid var(--line,#e5e7eb); border-radius:12px; overflow:hidden;
box-shadow:0 2px 10px rgba(2,6,23,.05); margin:10px 0 18px;
}
.report-page .survey_content thead th{
background:linear-gradient(180deg,#f9fafb,#f1f5f9);
color:var(--ink-1,#0f172a); font-weight:800; padding:10px; border-bottom:1px solid var(--line,#e5e7eb); text-align:center;
}
.report-page .survey_content tbody td,
.report-page .survey_content tbody th{ padding:9px 10px; border-top:1px solid var(--line,#e5e7eb); text-align:center; }
.report-page .survey_content tbody tr:nth-child(odd){ background:#fafbff; }
.report-page .survey_content td.tl{ text-align:left; }
.report-page .survey_content td.colorb,
.report-page .survey_content th.colorbh{ font-weight:700; color:var(--ink-1,#0f172a) }
.report-page .survey_content td.bg{ background:#eef2ff; font-weight:700 }
/* 그래프 토글 버튼(이미지 -> 텍스트, title 숫자로 매핑) */
.report-page .btn_graph{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.report-page .btn_graph a{
position:relative; display:inline-flex; align-items:center; justify-content:center;
height:36px; padding:0 12px; border-radius:8px; border:1px solid var(--line,#e5e7eb);
background:#fff; color:var(--ink-1,#0f172a); text-decoration:none; font-weight:700;
}
.report-page .btn_graph a img{display:none}
.report-page .btn_graph a[title="1"]::after{content:"막대그래프"}
.report-page .btn_graph a[title="2"]::after{content:"원형그래프"}
.report-page .btn_graph a[title="3"]::after{content:"100점 환산"}
.report-page .btn_graph a[title="4"]::after{content:"척도그래프"}
.report-page .btn_graph a[title="5"]::after{content:"교차분석"}
.report-page .btn_graph a[title="6"]::after{content:"비교막대"}
.report-page .graph1 img,
.report-page .graph2 img,
.report-page .graph3 img,
.report-page .graph4 img,
.report-page .graph5 img,
.report-page .graph6 img{ width:100%; height:auto; display:block; border-radius:12px; }
/* 문항 블록 카드화 */
.report-page .question{
background:#fff; border:1px solid var(--line,#e5e7eb); border-radius:16px; padding:16px; margin:16px 0;
box-shadow:0 10px 30px rgba(2,6,23,.06);
}
.report-page .question h6{
font-size:16px; margin:0 0 10px; font-weight:800; color:var(--ink-1,#0f172a);
}
.report-page .question h6 span{
display:inline-block; min-width:46px; height:26px; padding:0 8px; margin-right:6px;
border-radius:999px; background:#111827; color:#fff; text-align:center; line-height:26px; font-weight:800;
}
/* “응답 보기/이미지 응답 보기” 버튼(이미지 -> 텍스트) */
.report-page .survey_content a[href*="answer_view"] img,
.report-page .survey_content a[href*="image_view"] img{ display:none; }
.report-page .survey_content a[href*="answer_view"],
.report-page .survey_content a[href*="image_view"]{
display:inline-flex; align-items:center; justify-content:center;
height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--line,#e5e7eb);
background:#fff; color:var(--ink-1,#0f172a); text-decoration:none; font-weight:700;
}
.report-page .survey_content a[href*="answer_view"]::after{ content:"응답 보기"; }
.report-page .survey_content a[href*="image_view"]::after{ content:"이미지 응답 보기"; }
/* 짤림 방지 */
.report-page .survey_content td,
.report-page .survey_content th{ word-break:keep-all; overflow-wrap:anywhere; }
/* 작은 화면 최적화 */
@media (max-width: 768px){
.report-page .btn_graph{gap:6px}
.report-page .survey_content table{ font-size:13px }
.report-page .survey_title dl{flex-direction:column; gap:4px}
}
/* === 컨테이너: 다른 페이지와 동일한 최대 너비로 정렬 === */
.container-narrow {
max-width: 880px; /* 필요하면 840/960 중 하나로 조정, 사이트 공통값에 맞춰 OK */
margin: 0 auto;
padding: 0 16px;
}
/* === 카드 공통 === */
.card {
background: #fff;
border-radius: 16px;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.06);
overflow: hidden;
}
.card-header {
padding: 20px 24px 0 24px;
}
.card-title {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.2px;
margin: 0 0 8px 0;
}
.card-body {
padding: 20px 24px 28px 24px;
line-height: 1.75;
font-size: 15px;
color: #222;
}
.card hr {
border: 0;
height: 1px;
background: #eee;
margin: 20px 0;
}
/* === 정책 본문 전용 === */
.policy-meta { color: #666; font-size: 13px; margin-bottom: 6px; }
.policy-body h4 {
font-size: 17px;
font-weight: 700;
margin: 22px 0 10px;
color: #111;
}
.bullet { list-style: disc; margin: 6px 0 12px 20px; }
.bullet li { margin: 4px 0; }
/* 브레드크럼 살짝 정리 (공통 sub-hero를*
/* ❶ 전역 변수 보강: 숫자 포인트 하이라이트 색 */
:root {
/* ...기존 변수들... */
--accent: #ff7a00; /* 숫자 강조(이미지 톤과 유사), 필요시 수정 가능 */
}
/* ❷ 로그인 후 표시줄 */
.auth-area { display:flex; align-items:center; }
.auth-info{
display:flex; align-items:center; gap:10px; font-size:14px; color: var(--muted);
}
.auth-info .divider{ color:#c0c4ce; margin:0 2px; }
.auth-info .num{ color: var(--accent); font-weight:800; letter-spacing:.2px; }
.auth-info .link{
color:#333; text-decoration:none; font-weight:600;
}
.auth-info .link:hover{ color: var(--brand); }
/* 반응형: 좁은 화면에서는 로그인 후 표시를 한 줄로 줄이고, 기본 버거 메뉴 정책 유지 */
@media (max-width: 768px){
.auth-info{ display:none; } /* 모바일에선 메뉴 간결화. 필요시 표시 형태 변경 가능 */
}
/* ===== 회사 연혁 (Timeline) ===== */
:root{
/* 프로젝트에 이미 --brand가 있으면 그 값을 그대로 사용, 없으면 폴백 */
--brand: var(--brand, #3b82f6);
--ink-900: var(--ink-900, #0f172a);
--ink-500: var(--ink-500, #64748b);
--surface: var(--surface, #ffffff);
--border: var(--border, #e5e7eb);
}
.history-page .sub-hero{
padding: 72px 0 40px;
background: linear-gradient(180deg, rgba(59,130,246,0.10) 0%, rgba(59,130,246,0.00) 100%);
}
.history-page .sub-hero__title{
font-size: 28px; line-height: 1.2; font-weight: 800; color: var(--ink-900);
}
.history-page .sub-hero__desc{
margin-top: 8px; color: var(--ink-500);
}
.timeline{
position: relative;
margin: 32px auto 96px;
max-width: 920px;
padding-left: 28px; /* 오른쪽 정렬 실루엣 유지 */
}
.timeline::before{
content: "";
position: absolute; left: 12px; top: 0; bottom: 0;
width: 2px; background: linear-gradient(var(--brand), rgba(59,130,246,0.25));
opacity: 0.9;
}
.tl-item{
position: relative;
display: grid;
grid-template-columns: 140px 1fr;
gap: 16px;
padding: 22px 16px 22px 0;
}
.tl-item + .tl-item{ border-top: 1px dashed var(--border); }
.tl-pin{
position: absolute;
left: 3px; /* 타임라인 축 기준 */
top: 28px;
width: 18px; height: 18px;
background: var(--brand);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
}
.tl-meta{
grid-column: 1 / 2;
display: flex; align-items: center; gap: 10px;
}
.tl-year{
display: inline-block;
min-width: 96px;
font-size: 22px; font-weight: 800; color: var(--ink-900);
}
.tl-badge{
display: inline-block; padding: 4px 10px;
font-size: 12px; font-weight: 700; color: var(--brand);
background: rgba(59,130,246,0.10); border: 1px solid rgba(59,130,246,0.22);
border-radius: 999px;
}
.tl-body{
grid-column: 2 / 3;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 4px 14px rgba(2,6,23,0.04);
}
.tl-title{
font-size: 18px; font-weight: 700; margin: 2px 0 8px; color: var(--ink-900);
}
.tl-list{ margin: 0; padding-left: 18px; color: var(--ink-900); }
.tl-list li{ margin: 2px 0; }
/* 모바일 최적화 */
@media (max-width: 768px){
.timeline{ padding-left: 22px; }
.tl-item{ grid-template-columns: 110px 1fr; gap: 12px; padding-right: 0; }
.tl-year{ min-width: 84px; font-size: 18px; }
.tl-body{ padding: 14px; }
.tl-pin{ top: 24px; }
}
:root{
--brand: var(--brand, #3b82f6);
--ink-900: var(--ink-900, #0f172a);
--ink-700: var(--ink-700, #1f2937);
--ink-500: var(--ink-500, #64748b);
--border: var(--border, #e5e7eb);
}
.sub-hero{
padding: 80px 0 60px;
background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(59,130,246,0));
text-align: center;
}
.sub-hero__title{ font-size:28px; font-weight:800; color:var(--ink-900); margin-bottom:10px; }
.sub-hero__desc{ color:var(--ink-500); line-height:1.7; }
/* 2단 레이아웃 (이미지+텍스트) */
.intro-block{ padding: 100px 0; }
.intro-inner{ display:flex; gap:60px; align-items:center; justify-content:space-between; }
.intro-block.alt .intro-inner{ flex-direction: row-reverse; }
.intro-text{ flex:1; }
.intro-text h2{ font-size:24px; font-weight:800; margin-bottom:14px; color:var(--ink-900); }
.intro-text p{ color:var(--ink-700); line-height:1.7; margin-bottom:18px; }
.dot-list,.check-list{ margin:0; padding-left:20px; }
.dot-list li{ list-style:disc; margin:6px 0; }
.check-list li{ list-style:"✔ "; margin:6px 0; }
.intro-image{ flex:1; text-align:center; }
.intro-image img{ max-width:100%; border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.06); }
/* 반응형 */
@media (max-width: 992px){
.intro-block{ padding: 70px 0; }
.intro-inner{ flex-direction:column; gap:40px; }
}
/* ===== FAQ (Accordion) ===== */
:root{
--ink-900: var(--ink-900, #0f172a);
--ink-700: var(--ink-700, #1f2937);
--ink-500: var(--ink-500, #64748b);
--border: var(--border, #e5e7eb);
--surface: var(--surface, #ffffff);
--muted: var(--muted, #f6f8fb);
}
.faq .faq-list{
max-width: 920px;
margin: 0 auto;
}
/* 각 항목 카드화 */
.faq-item{
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
margin: 12px 0;
box-shadow: 0 6px 16px rgba(2,6,23,.04);
overflow: hidden;
}
/* 질문 요약줄 */
.faq-q{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
font-weight: 700;
color: var(--ink-900);
cursor: pointer;
list-style: none; /* 일부 브라우저 기본 화살표 제거 */
}
/* 사용자 정의 화살표 */
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after{
content: "";
width: 18px; height: 18px; flex: 0 0 18px;
background: conic-gradient(from 45deg, transparent 0 75%, currentColor 0) no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain;
color: #9aa4b2;
transition: transform .2s ease, color .2s ease;
}
/* 펼쳐졌을 때 회전 */
.faq-item[open] .faq-q::after{
transform: rotate(180deg);
color: var(--ink-500);
}
/* 답변 본문 */
.faq-a{
padding: 16px 20px 20px;
background: #9cbdff;
color: var(--ink-700);
border-top: 1px solid var(--border);
}
.faq-a p{ margin: 0 0 10px; line-height: 1.7; }
.faq-a ul{ margin: 8px 0 0 18px; }
.faq-a li{ margin: 4px 0; }
/* 섹션 상하 여백 여유롭게 */
.section.container.faq{ padding-top: 64px; padding-bottom: 96px; }
/* 반응형 */
@media (max-width: 768px){
.faq-q{ padding: 16px; }
.faq-a{ padding: 14px 16px 18px; }
}
/* guide.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: #f9fafb;
color: #333;
}
.guide-section {
padding: 80px 20px 120px;
}
.container {
max-width: 1120px;
margin: 0 auto;
}
.title-wrapper {
text-align: center;
margin-bottom: 80px;
}
.main-title {
font-size: 44px;
font-weight: 700;
color: #1f2937;
margin-bottom: 20px;
}
.subtitle {
font-size: 20px;
color: #6b7280;
max-width: 720px;
margin: 0 auto;
line-height: 1.6;
}
.steps-grid {
display: grid;
gap: 40px;
max-width: 960px;
margin: 0 auto;
}
.step-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
padding: 40px;
transition: all 0.3s ease;
}
.step-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.step-content {
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
}
@media (min-width: 768px) {
.step-content {
flex-direction: row;
align-items: center;
}
}
.step-number {
font-size: 80px;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.step-text h3 {
font-size: 28px;
font-weight: 600;
color: #1f2937;
margin-bottom: 16px;
}
.step-text p {
font-size: 18px;
color: #4b5563;
line-height: 1.8;
}
.highlight {
font-weight: 600;
color: #764ba2;
}
.contact-card {
margin-top: 100px;
text-align: center;
background: linear-gradient(to right, #667eea, #764ba2);
color: white;
padding: 50px 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.contact-text {
font-size: 19px;
margin-bottom: 16px;
opacity: 0.95;
}
.contact-phone {
font-size: 40px;
font-weight: 700;
}
/* 반응형 조정 */
@media (max-width: 768px) {
.main-title {
font-size: 36px;
}
.step-number {
font-size: 64px;
}
.step-text h3 {
font-size: 24px;
}
.contact-phone {
font-size: 32px;
}
.guide-section {
padding: 60px 20px;
}
}
/* Core Competencies - 독립 클래스 버전 (충돌 방지) */
.comp-section {
padding: 120px 20px;
background: #f8f9ff;
}
.comp-title {
font-size: 48px;
font-weight: 700;
text-align: center;
margin-bottom: 80px;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.comp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.comp-card {
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.comp-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.comp-header {
height: 140px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.comp-icon-wrapper {
width: 100px;
height: 100px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.comp-icon-wrapper i {
font-size: 48px;
color: inherit;
}
.comp-body {
padding: 32px 24px;
text-align: center;
}
.comp-body h3 {
font-size: 24px;
font-weight: 600;
color: #1f2937;
margin-bottom: 16px;
}
.comp-body p {
font-size: 16px;
color: #4b5563;
line-height: 1.8;
}
/* 각 카드별 헤더 색상 */
.comp-card-purple .comp-header { background: linear-gradient(135deg, #6b46c1, #9f7aea); }
.comp-card-teal .comp-header { background: linear-gradient(135deg, #319795, #4fd1c5); }
.comp-card-orange .comp-header { background: linear-gradient(135deg, #f97316, #fb923c); }
.comp-card-purple2 .comp-header { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.comp-card-green .comp-header { background: linear-gradient(135deg, #10b981, #34d399); }
.comp-card-purple .comp-icon-wrapper i { color: #9f7aea; }
.comp-card-teal .comp-icon-wrapper i { color: #4fd1c5; }
.comp-card-orange .comp-icon-wrapper i { color: #fb923c; }
.comp-card-purple2 .comp-icon-wrapper i { color: #a78bfa; }
.comp-card-green .comp-icon-wrapper i { color: #34d399; }
/* 반응형 */
@media (max-width: 768px) {
.comp-title {
font-size: 40px;
margin-bottom: 60px;
}
.comp-header {
height: 120px;
}
.comp-icon-wrapper {
width: 80px;
height: 80px;
}
.comp-icon-wrapper i {
font-size: 40px;
}
.comp-body {
padding: 28px 20px;
}
.comp-body h3 {
font-size: 22px;
}
}
/* panel.css - 분리 버전 (클래스 충돌 방지) */
.panel-section {
padding: 100px 20px;
background: #ffffff;
}
.panel-container {
max-width: 1100px;
margin: 0 auto;
}
.panel-title {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
color: #1f2937;
}
.panel-subtitle {
font-size: 18px;
color: #4b5563;
margin-bottom: 60px;
line-height: 1.7;
}
/* 강점 리스트 */
.panel-features {
margin-bottom: 80px;
}
.panel-feature-item {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 40px;
}
.panel-feature-icon {
flex-shrink: 0;
font-size: 40px;
color: #667eea;
}
.panel-feature-text h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
color: #1f2937;
}
.panel-feature-text p {
font-size: 16px;
color: #4b5563;
line-height: 1.7;
}
/* 패널 분포 비중 - 막대 그래프 */
.panel-distribution {
margin-top: 80px;
}
.panel-distribution-title {
font-size: 36px;
font-weight: 600;
margin-bottom: 12px;
color: #1f2937;
}
.panel-distribution-subtitle {
font-size: 18px;
color: #6b7280;
margin-bottom: 50px;
}
.panel-bar-charts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.panel-bar-group {
margin-bottom: 40px;
}
.panel-bar-group-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
color: #1f2937;
}
.panel-bar-item {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.panel-bar-label {
width: 100px;
font-size: 18px;
color: #4b5563;
text-align: left;
}
.panel-bar-wrapper {
flex: 1;
height: 30px;
background: #e5e7eb;
border-radius: 15px;
overflow: hidden;
position: relative;
}
.panel-bar-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 15px;
transition: width 1.5s ease-in-out;
}
.panel-bar-percent {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
font-weight: 600;
color: white;
}
.panel-closing {
margin-top: 100px;
text-align: center;
font-size: 20px;
color: #4b5563;
line-height: 1.8;
padding: 40px;
background: rgba(102, 126, 234, 0.05);
border-radius: 20px;
}
/* 반응형 */
@media (max-width: 768px) {
.panel-title { font-size: 36px; }
.panel-subtitle { font-size: 16px; }
.panel-feature-item { flex-direction: column; align-items: flex-start; }
.panel-bar-charts { grid-template-columns: 1fr; }
.panel-bar-label { width: 80px; font-size: 16px; }
}