/*
Pretendard Font Import
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
*/
@import url('pretendard.min.css');
@import url('base.css');
:root {
--primary-color: var(--mode-color-text-primary-light);
--text-primary: var(--mode-color-text-basic-light);
--text-secondary: var(--mode-color-text-subtle-light);
--text-green: var(--mode-color-graphic-green-darker-light);
--bg-light: var(--mode-color-background-gray-subtler-light);
--border-light: var(--mode-color-graphic-yellow-subtler-light);
--gradient-start: var(--mode-color-graphic-yellow-subtle-light);
--gradient-middle: var(--mode-color-graphic-green-subtle-light);
--gradient-end: var(--primitive-color-light-point-10-light);
}
* {
font-family: 'Pretendard', sans-serif;
}
ul {
list-style: none;
padding-left: 0;
}
p{
word-break: keep-all;
}
/* Figma Container System */
.figma-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
/* Tablet: 768px ~ 1240px */
@media (min-width: 768px) and (max-width: 1240px) {
.figma-container {
padding-left: 60px;
padding-right: 60px;
}
}
/* Mobile: < 768px */
@media (max-width: 767px) {
.figma-container {
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom Container - Responsive Design (Legacy) */
.custom-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.custom-container .custom-container {
padding-left: 0;
padding-right: 0;
}
/* Tablet: 768px ~ 1240px */
@media (min-width: 768px) and (max-width: 1240px) {
.custom-container {
padding-left: 24px;
padding-right: 24px;
}
}
/* Mobile: < 768px */
@media (max-width: 767px) {
.custom-container {
padding-left: 16px;
padding-right: 16px;
}
}
/* Navigation - Exact Figma specs */
.navbar-custom {
background-color: var(--mode-color-background-white-light);
box-shadow: 0px 4px 12px 0px rgba(55, 65, 81, 0.05);
position: sticky;
top: 0;
z-index: 1000;
padding: 16px 0;
}
.navbar-custom .custom-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.navbar-custom .navbar-brand {
width: auto;
height: 40px;
padding: 0;
display: flex;
align-items: center;
gap : 12px;
flex-shrink: 0;
}
.navbar-custom .navbar-toggler {
margin-left: auto;
}
.navbar-custom .navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
}
.navbar-custom .navbar-brand .logo {
display:none;
}
.navbar-custom .navbar-brand p {
font-size : 1.15rem;
margin-bottom : 0;
font-weight : bold;
margin-bottom : -2px;
}
.navbar-custom .navbar-brand img {
width: auto;
height: 100%;
max-height: 40px;
object-fit: contain;
}
.navbar-custom .navbar-brand img.symbol {
width: auto;
height: 36px;
flex-shrink: 0;
}
.navbar-custom .navbar-nav {
display: flex;
gap: 16px;
align-items: center;
margin: 0;
}
/* 데스크톱: 정렬 복원 */
@media (min-width: 992px) {
.navbar-custom .navbar-collapse {
flex-basis: auto;
justify-content: flex-end;
}
}
/* iOS Safari 전용 보정 (필요시) */
@supports (-webkit-touch-callout: none) {
.navbar-custom .custom-container {
-webkit-box-align: center;
-webkit-box-pack: justify;
}
}
/* Mobile Navigation Dropdown */
@media (max-width: 991px) {
.navbar-custom .navbar-collapse {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #ffffff;
box-shadow: 0px 12px 12px 0px rgba(55, 65, 81, 0.06);
border-radius: 0 0 8px 8px;
padding: 0 20px 24px 20px;
z-index: 1000;
width: 100%;
}
.navbar-custom .navbar-nav {
flex-direction: column;
gap: 0;
align-items: center;
justify-content: center;
}
.navbar-custom .nav-link {
padding: 12px 24px !important;
border-bottom: 1px solid #f0f0f0;
margin: 0;
width: auto;
min-width: 200px;
min-height: 44px;
text-align: center;
justify-content: center;
display: flex;
align-items: center;
}
.navbar-custom .nav-link:last-child {
border-bottom: none;
}
}
@media (max-width : 500px) {
.navbar-custom .navbar-brand p {
display : none;
}
.navbar-custom .navbar-brand .symbol {
display : none;
}
.navbar-custom .navbar-brand .logo {
display : block;
}
}
.navbar-custom .nav-link {
font-size: 18px;
font-weight: 300;
color: var(--text-primary) !important;
text-align: center;
white-space: nowrap;
border: none;
background: none;
margin: 0 8px 8px;
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 !important;
}
.navbar-custom .nav-link:hover:not(.active) {
color: var(--primary-color) !important;
font-weight: 400;
}
.navbar-custom .nav-link.active {
font-weight: 500;
color: var(--primary-color) !important;
}
/* Dropdown Menu Styles */
.navbar-custom .dropdown-toggle::after {
display: none;
}
.navbar-custom .dropdown-menu {
background-color: var(--mode-color-background-white-light);
border: 1px solid var(--border-light);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 8px 0;
margin-top: 0px;
min-width: 200px;
position: absolute;
z-index: 1001;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.25s ease;
pointer-events: none;
display: block !important;
top: 100%;
}
.navbar-custom .dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.navbar-custom .dropdown-item {
font-size: 16px;
font-weight: 300;
letter-spacing: -0.14px;
color: var(--text-primary);
padding: 12px 20px;
border: none;
background: none;
transition: all 0.2s ease;
position: relative;
display: block;
width: 100%;
text-align: left;
white-space: nowrap;
}
.navbar-custom .dropdown-item:hover {
background-color: var(--bg-light);
color: var(--primary-color);
}
.navbar-custom .dropdown-item.active {
background-color: var(--primary-color);
color: var(--mode-color-text-basic-inverse-light);
font-weight: 500;
}
.navbar-custom .dropdown-item.active:hover {
background-color: var(--primary-color);
color: var(--mode-color-text-basic-inverse-light);
}
/* Hover effect for parent dropdown */
.navbar-custom .nav-item {
width: 100%;
padding : 0;
}
.navbar-custom .nav-item.dropdown:hover .dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
/* Extend hover area to prevent dropdown from disappearing */
.navbar-custom .nav-item.dropdown::before {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 0.625rem;
z-index: 1000;
}
/* Keep dropdown visible when hovering over dropdown menu itself */
.navbar-custom .dropdown-menu:hover {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
/* Make the entire dropdown area hoverable */
.navbar-custom .nav-item.dropdown:hover::before {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 0.625rem;
z-index: 999;
}
/* Mobile Dropdown Styles */
@media (max-width: 991px) {
.navbar-custom .nav-item.dropdown {
position: relative;
padding: 16px 0;
}
.navbar-custom .dropdown-menu {
position: static;
float: none;
width: 100%;
margin-top: 0;
background-color: var(--bg-light);
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease;
transform: none;
visibility: visible;
pointer-events: auto;
}
.navbar-custom .dropdown-menu.show {
max-height: 300px;
opacity: 1;
}
.navbar-custom .dropdown-item {
padding: 16px 40px;
font-size: 16px;
border-bottom: 1px solid #e0e0e0;
}
.navbar-custom .dropdown-item:last-child {
border-bottom: none;
}
.navbar-custom .nav-item .nav-link {
width: 100%;
}
}
/* Hero Section - Exact Figma specs */
.hero-section {
background: linear-gradient(100deg, var(--mode-color-graphic-yellow-subtler-light) 36.9%, var(--primitive-color-light-success-5-light) 97.59%);
padding: 60px 0 20px;
overflow: hidden;
position: relative;
isolation: isolate;
}
.hero-content {
width: 550px;
display: flex;
flex-direction: column;
gap: 32px;
}
.hero-title {
font-size: 48px;
font-weight: 400;
letter-spacing: -0.48px;
line-height: 1.3;
margin-bottom: 16px;
color: var(--mode-color-text-bolder-light);
}
.hero-title .normal {
font-weight: 400;
letter-spacing: -0.48px;
}
.hero-title .highlight {
font-weight: 800;
font-size: 50px;
letter-spacing: -0.5px;
color: var(--primary-color);
}
.hero-description {
font-size: 18px;
font-weight: 300;
letter-spacing: -0.18px;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 0;
}
.btn-hero {
background-color: var(--mode-color-button-tertiary-fill-light);
border: 1px solid var(--mode-color-button-tertiary-border-light);
color: var(--mode-color-button-tertiary-border-light);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.18px;
padding: 10px 20px;
border-radius: 5px;
display: inline-flex;
align-items: center;
gap: 4px;
width: fit-content;
}
.btn-hero:hover {
background-color: var(--mode-color-button-tertiary-border-light);
color: var(--mode-color-text-basic-inverse-light);
}
@media screen and (max-width: 768px) {
.btn-hero {
width: auto;
justify-content: center;
}
}
.hero-image-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image {
width: 100%;
aspect-ratio: 1456/816;
position: relative;
overflow: hidden;
}
.hero-image img {
position: absolute;
width: 100%;
height: auto;
max-width: none;
}
/* Contact Header - Exact Figma gradient */
.contact-header {
background: linear-gradient(90deg, var(--mode-color-graphic-yellow-subtle-light) 0%, var(--mode-color-graphic-green-subtle-light) 53.365%, var(--primitive-color-light-point-10-light) 100%);
padding: 30px 0;
}
.contact-items-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex: 1;
}
.contact-item {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 8px;
width: 27%;
}
.contact-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 0;
}
.contact-icon img {
vertical-align: top;
width: 100%;
}
.contact-phone {
font-weight: 900;
font-size: 24px;
line-height: 20px;
color: var(--text-primary);
white-space: nowrap;
}
.contact-main {
font-weight: 700;
font-size: 20px;
line-height: 20px;
color: var(--text-primary);
}
.contact-sub {
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--text-secondary);
margin-top: 2px;
}
/* Services Section - Exact Figma specs */
.services-section {
background-color: var(--bg-light);
padding: 80px 0;
}
.section-title {
font-weight: 700;
font-size: 36px;
letter-spacing: -0.36px;
line-height: 1.5;
color: var(--text-primary);
text-align: center;
margin-bottom: 4px;
}
.section-subtitle {
font-weight: 400;
font-size: 18px;
letter-spacing: -0.18px;
line-height: 1.5;
color: var(--text-secondary);
text-align: center;
margin-bottom: 32px;
}
.services-container {
display: flex;
gap: 16px;
}
.service-card {
background-color: var(--mode-color-background-white-light);
border-radius: 24px;
padding: 24px 32px 32px;
flex: 1;
display: flex;
flex-direction: column;
}
.service-icon {
width: 64px;
height: 4rem;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.service-icon.alcohol {
background-color: var(--mode-color-graphic-yellow-subtler-light);
}
.service-icon.gambling {
background-color: var(--mode-color-graphic-green-subtler-light);
}
.service-icon.drug {
background-color: var(--primitive-color-light-point-5-light);
}
.service-icon.digital {
background-color: var(--primitive-color-light-warning-5-light);
}
.service-title {
font-weight: 700;
font-size: 24px;
letter-spacing: -0.24px;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 16px;
}
.service-description {
font-weight: 400;
font-size: 16px;
letter-spacing: -0.16px;
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: 24px;
flex-grow: 1;
height: 72px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.btn-service {
font-weight: 700;
font-size: 18px;
letter-spacing: -0.18px;
color: var(--text-primary);
border: none;
border-radius: 5px;
padding: 10px 20px;
width: 100%;
line-height: 1.2;
}
.btn-service.alcohol {
background-color: #ffd87d;
border: 1px solid #ffd87d;
--btn-bg: #ffd87d;
--btn-hover-bg: #fab937;
}
.btn-service.gambling {
background-color: #b6d33d;
border: 1px solid #b6d33d;
--btn-bg: #b6d33d;
--btn-hover-bg: #a0be1e;
}
.btn-service.drug {
background-color: #5ab4c8;
border: 1px solid #5ab4c8;
--btn-bg: #5ab4c8;
--btn-hover-bg: #4a9dbd;
}
.btn-service.digital {
background-color: #fab300;
border: 1px solid #fab300;
--btn-bg: #fab300;
--btn-hover-bg: #d6851b;
}
.btn-service:hover,
.btn-service:focus-visible {
background-color: var(--btn-hover-bg, var(--btn-bg, inherit));
border-color: var(--btn-hover-bg, var(--btn-bg, currentColor));
}
/* Map and Programs Section - Exact Figma specs */
.map-programs-section {
padding: 96px 0;
}
.map-programs-title {
font-weight: 700;
font-size: 36px;
letter-spacing: -0.36px;
line-height: 1.5;
color: var(--text-primary);
text-align: center;
margin-bottom: 64px;
}
@media screen and (max-width: 1200px) {
.map-programs-title {
font-size: 28px;
letter-spacing: -0.28px;
margin-bottom: 24px;
}
}
.map-programs-content {
display: flex;
gap: 62px;
align-items: center;
justify-content: center;
}
.map-container {
position: relative;
height: 534px;
flex: 1;
}
.map-bg-icon {
position: absolute;
border-radius: 2rem;
}
.map-bg-icon-1 {
top: -32px;
left: -32px;
width: 128px;
height: 128px;
background-color: var(--mode-color-graphic-yellow-subtler-light);
z-index: -1;
}
.map-bg-icon-2 {
bottom: -32px;
right: -32px;
width: 96px;
height: 96px;
background-color: var(--mode-color-graphic-green-subtler-light);
z-index: -1;
}
.map-frame {
background-color: #ffffff;
border-radius: 24px;
box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
padding: 32px;
height: 100%;
overflow: hidden;
}
.map-display {
width: 100%;
height: 218px;
background-color: var(--mode-color-background-gray-subtle-light);
border-radius: 12px;
overflow: hidden;
position: relative;
}
.map-display iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
border-radius: 12px;
}
.map-info-title {
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.24px;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 0;
}
.map-info-item {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 18px;
}
.map-info-item:last-child {
margin-bottom: 0;
}
.map-info-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.map-info-icon.address {
background-color: var(--mode-color-graphic-yellow-subtler-light);
}
.map-info-icon.subway {
background-color: var(--mode-color-graphic-green-subtler-light);
}
.map-info-icon.bus {
background-color: var(--primitive-color-light-point-10-light);
}
.map-info-label {
font-weight: 700;
font-size: 16px;
letter-spacing: -0.16px;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 0;
}
.map-info-text {
font-weight: 400;
font-size: 16px;
letter-spacing: -0.16px;
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: 0;
}
/* Programs Container */
.programs-container {
background-color: var(--mode-color-background-white-light);
border: 1px solid var(--mode-color-border-gray-light-light);
border-radius: 24px;
padding: 24px 33px 33px;
height: 534px;
width: 544px;
flex-shrink: 0;
}
.programs-title {
font-weight: 700;
font-size: 1.5rem;
line-height: 32px;
color: var(--text-primary);
margin-bottom: 24px;
}
.programs-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
width: 478px;
height: 412px;
}
.program-card {
background-color: var(--bg-light);
border-radius: 20px;
padding: 20px 24px 24px 24px;
width: calc(50% - 12px);
height: 200px;
display: flex;
flex-direction: column;
}
.program-icon {
width: 48px;
height: 48px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.program-icon.counseling,
.program-icon.family {
background-color: #fff5dc;
}
.program-icon.group,
.program-icon.rehab {
background-color: #d5e889;
}
.program-title {
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: var(--text-primary);
margin-bottom: 8px;
}
.program-description {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--text-secondary);
flex-grow: 1;
margin-block-end: 0;
}
/* Support Section - Exact Figma specs */
.support-section {
padding: 40px 0 96px;
}
.support-container {
background-color: var(--bg-light);
border-radius: 16px;
padding: 48px;
text-align: center;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
margin: 0 auto;
}
.support-title {
font-weight: 700;
font-size: 1.875rem;
line-height: 36px;
color: var(--text-green);
margin-bottom: 0;
}
.support-description {
font-weight: 400;
font-size: 1.25rem;
line-height: 32.5px;
color: var(--text-green);
margin-bottom: 8px;
max-width: 768px;
text-align: center;
white-space: pre-line;
}
@media screen and (max-width: 768px) {
.support-description {
font-size: 1.15rem;
}
.support-container {
padding: 24px 16px;
}
.support-title {
font-size: 1.5rem;
}
.support-description {
font-size: 1rem;
}
}
.support-contact-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.support-phone-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.support-contact {
font-weight: 600;
font-size: 18px;
line-height: 28px;
color: var(--text-green);
margin-bottom: 0;
}
/* Target Diagram for Center Introduction */
.target-diagram {
position: relative;
height: 600px;
margin: 60px 0;
display: flex;
align-items: center;
justify-content: center;
}
.target-circle {
position: absolute;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-primary);
font-weight: 600;
}
.target-circle h3 {
margin: 0;
line-height: 1.4;
font-size: 1.5rem;
}
.main-circle {
width: 600px;
height: 600px;
background: radial-gradient(circle at center, rgba(255, 216, 125, 0.3), rgba(213, 232, 137, 0.3));
border: 3px solid rgba(152, 58, 15, 0.2);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.main-circle h3 {
font-size: 2.25rem;
font-weight: 600;
}
.secondary-circle {
width: 539px;
height: 539px;
background: radial-gradient(circle at center, rgba(213, 232, 137, 0.4), rgba(190, 227, 235, 0.4));
border: 3px solid rgba(152, 58, 15, 0.3);
right: 0;
top: 20%;
z-index: 2;
}
.secondary-circle h3 {
font-size: 1.75rem;
font-weight: 500;
}
.third-circle {
width: 409px;
height: 409px;
background: radial-gradient(circle at center, rgba(190, 227, 235, 0.5), rgba(255, 216, 125, 0.3));
border: 3px solid rgba(152, 58, 15, 0.4);
left: 25%;
bottom: 0;
z-index: 3;
}
.third-circle h3 {
font-size: 1.875rem;
font-weight: 600;
}
/* Hero gradient for center introduction */
.hero-gradient {
background: linear-gradient(to right, #e9fbfe, #fbfeef);
}
/* Mobile responsiveness for target diagram */
@media (max-width: 768px) {
.target-diagram {
height: 400px;
margin: 40px 0;
}
.main-circle {
width: 300px;
height: 300px;
}
.main-circle h3 {
font-size: 1.5rem;
}
.secondary-circle {
width: 250px;
height: 250px;
right: -10%;
top: 10%;
}
.secondary-circle h3 {
font-size: 1rem;
}
.third-circle {
width: 200px;
height: 200px;
left: 10%;
bottom: -10%;
}
.third-circle h3 {
font-size: 1.125rem;
}
}
/* Additional styles for center introduction page */
.about-section {
padding: 60px 0;
}
.about-section.bg-light {
background-color: var(--bg-light);
}
.about-content {
display: flex;
align-items: center;
gap: 32px;
}
.about-text {
flex: 1;
}
.about-text h3 {
font-weight: 700;
font-size: 1.25rem;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 16px;
}
.about-text p {
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: 16px;
}
.about-image {
width: 496px;
flex-shrink: 0;
}
.about-image img {
width: 100%;
height: 313px;
object-fit: cover;
background-color: #d9d9d9;
border-radius: 8px;
}
/* Timeline section reused for target diagram */
.timeline-section {
padding: 60px 0;
}
/* Treatment section reused for legal basis */
.treatment-section {
padding: 60px 0;
}
.treatment-methods {
display: flex;
gap: 16px;
align-items: stretch;
}
.method-card {
background-color: var(--bg-light);
border-radius: 20px;
padding: 30px 32px;
flex: 1;
display: flex;
align-items: flex-end;
gap: 36px;
min-height: 176px;
}
.method-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 9px;
}
.method-content h3 {
font-weight: 700;
font-size: 19px;
line-height: 1.5;
color: var(--text-primary);
margin: 0;
}
.method-content p {
font-weight: 400;
font-size: 17px;
line-height: 1.5;
color: var(--text-primary);
margin: 0;
}
.method-icon {
width: 72px;
height: 72px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
border-radius: 50%;
}
.method-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Mobile responsiveness for center introduction */
@media (max-width: 768px) {
.about-content {
flex-direction: column;
gap: 24px;
}
.about-image {
width: 100%;
order: -1;
}
.about-image img {
height: 200px;
}
.about-text h3 {
font-size: 18px;
}
.about-text p {
font-size: 16px;
}
.treatment-methods {
flex-direction: column;
gap: 12px;
}
.method-card {
padding: 20px 24px;
gap: 24px;
min-height: 140px;
}
.method-content h3 {
font-size: 17px;
}
.method-content p {
font-size: 15px;
}
.method-icon {
width: 56px;
height: 56px;
}
}
/* Figma Center Introduction Page Styles */
.figma-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation - Exact Figma specs */
.figma-nav {
background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(55, 65, 81, 0.05);
position: sticky;
top: 0;
z-index: 1000;
padding: 16px 0;
}
.figma-nav .figma-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.figma-logo {
width: 88px;
height: 50px;
display: flex;
align-items: center;
}
.figma-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.figma-nav-menu {
display: flex;
gap: 16px;
align-items: center;
}
.figma-nav-link {
width: 90px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0 0.59px 0;
font-weight: 300;
font-size: 16px;
line-height: 1.5;
color: #191919;
text-decoration: none;
white-space: pre;
}
.figma-nav-link.active {
font-weight: 500;
color: #983a0f;
}
/* Navigation Dropdown */
.figma-nav-dropdown {
position: relative;
display: inline-block;
}
.figma-dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
border-radius: 8px;
z-index: 1000;
top: 100%;
left: 0;
margin-top: 8px;
}
.figma-dropdown-content a {
color: #191919;
padding: 12px 20px;
text-decoration: none;
display: block;
font-weight: 300;
font-size: 16px;
line-height: 1.5;
transition: background-color 0.3s ease;
}
.figma-dropdown-content a:first-child {
border-radius: 8px 8px 0 0;
}
.figma-dropdown-content a:last-child {
border-radius: 0 0 8px 8px;
}
.figma-dropdown-content a:hover {
background-color: #f8f8f8;
color: #983a0f;
}
.figma-nav-dropdown:hover .figma-dropdown-content {
display: block;
}
/* Hero Section - Exact Figma specs */
.figma-hero {
background: linear-gradient(to right, #e9fbfe, #fbfeef);
padding: 60px 0;
overflow: hidden;
}
.figma-hero-content {
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
}
.figma-hero h1 {
font-weight: 700;
font-size: 2.25rem;
line-height: 1.3;
color: #191919;
text-align: center;
letter-spacing: -0.36px;
margin: 0;
}
.figma-hero p {
font-weight: 300;
font-size: 18px;
line-height: 1.5;
color: #4c4c4c;
text-align: center;
letter-spacing: -0.18px;
margin: 0;
}
/* About Section - Exact Figma specs */
.figma-about {
background: #f8f8f8;
padding: 60px 0;
}
.figma-section-title-box {
display : flex;
flex-direction : row;
justify-content : center;
align-items : center;
margin-bottom : 40px;
gap : 12px;
}
.figma-section-title-box img {
width : 120px;
height : auto;
}
.figma-section-title {
font-weight: 700;
font-size: 2.25rem;
line-height: 1.5;
color: #191919;
text-align: center;
letter-spacing: -0.36px;
margin-bottom : 40px;
}
.figma-section-title-box h2 {
margin-bottom : 0;
margin-top : 16px;
}
@media (max-width : 490px) {
.figma-section-title-box img {
width : 24%;
}
.figma-section-title-box h2 {
margin-top : 4px;
font-size : 1.6rem;}
}
.figma-about-content {
display: flex;
gap: 32px;
align-items: center;
overflow: hidden;
}
.figma-about-image {
width: 496px;
flex-shrink: 0;
}
.figma-placeholder-image {
width: 100%;
aspect-ratio: 496/313;
background: #d9d9d9;
}
.figma-about-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
justify-content: center;
}
.figma-about-text h3 {
font-weight: 700;
font-size: 1.25rem;
line-height: 1.5;
color: #191919;
margin: 0;
}
.figma-about-description {
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: #4c4c4c;
}
.figma-about-description p {
margin: 0;
}
/* Legal Basis Section - Exact Figma specs */
.figma-legal {
padding: 60px 0;
}
.figma-legal-content {
display: flex;
gap: 16px;
align-items: stretch;
}
.figma-legal-card {
background: #f8f8f8;
border-radius: 20px;
padding: 30px 32px;
width: 612px;
min-height: 176px;
display: flex;
align-items: flex-end;
gap: 36px;
overflow: hidden;
}
.figma-legal-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 9px;
align-items: stretch;
height: 100%;
}
.figma-legal-text h3 {
font-weight: 700;
font-size: 19px;
line-height: 1.5;
color: #191919;
margin: 0;
}
.figma-legal-description {
font-weight: 400;
font-size: 17px;
line-height: 1.5;
color: #191919;
}
.figma-legal-description p {
margin: 0;
}
.figma-legal-icon {
width: 72px;
height: 72px;
flex-shrink: 0;
}
.figma-icon-placeholder {
width: 100%;
height: 100%;
}
/* Target Range Section - Image based */
.figma-target {
padding: 60px 0;
}
.figma-target-diagram {
position: relative;
text-align: center;
margin-bottom: 60px;
}
.figma-target-diagram img{
width: 80%;
margin: 0 auto;
}
.figma-target-diagram::after {
content: "";
position: absolute;
width: 100%;
height: 2000px;
top: -560px;
left: 0;
background: url(../images/customer_pc_bg.png) no-repeat center;
z-index: -1;
background-size: contain;
}
.target-diagram-desktop {
max-width: 1240px;
height: auto;
display: block;
}
.target-diagram-tablet {
width: 100%;
height: auto;
display: none;
}
.target-diagram-mobile {
width: 100%;
height: auto;
display: none;
}
/* Tablet responsive (768px ~ 1240px) */
@media (min-width: 769px) and (max-width: 1240px) {
.figma-target-diagram::after {
content: "";
position: absolute;
top: -550px;
left: 24px;
background: url(/images/customer_tablet_bg.png) no-repeat center;
z-index: -1;
background-size: contain;
}
.target-diagram-desktop {
display: none;
}
.target-diagram-tablet {
display: block;
}
.target-diagram-mobile {
display: none;
}
}
/* Mobile responsive (768px ����) */
@media (max-width: 768px) {
.figma-target-diagram::after {
background: none;
}
.target-diagram-desktop {
display: none;
}
.target-diagram-tablet {
display: none;
}
.target-diagram-mobile {
display: block;
}
}
/* Director Message Section - Exact Figma specs */
.figma-director {
padding: 60px 0;
}
.figma-director-content {
display: flex;
gap: 32px;
align-items: center;
overflow: hidden;
}
.figma-director-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
justify-content: center;
}
.figma-director-text h3 {
font-weight: 700;
font-size: 1.25rem;
line-height: 1.5;
color: #191919;
margin: 0;
}
.figma-director-description {
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: #4c4c4c;
}
.figma-director-description p {
margin: 0;
}
.figma-director-image {
width: 30%;
flex-shrink: 0;
}
.figma-director-image img{
width:100%;
}
/* Footer - Exact Figma specs */
.figma-footer {
padding: 63px 0 64px;
position: relative;
z-index: 1;
}
.figma-footer-content {
display: flex;
flex-direction: column;
gap: 48px;
position: relative;
z-index: 1;
}
.figma-footer-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.figma-footer-left {
display: flex;
flex-direction: column;
gap: 16px;
width: 592px;
}
.figma-footer-logo {
width: 100px;
height: 56px;
}
.figma-footer-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.figma-footer-info {
font-weight: 300;
font-size: 16px;
line-height: 1.5;
color: #191919;
}
.figma-footer-info p {
margin: 0;
}
.figma-footer-column {
width: 280px;
display: flex;
flex-direction: column;
gap: 12px;
}
.figma-footer-column h4 {
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: #191919;
margin: 0;
}
.figma-footer-column p {
font-weight: 300;
font-size: 16px;
line-height: 1.5;
color: #191919;
margin: 0;
}
.figma-footer-bottom {
border-top: 1px solid #666666;
padding-top: 32px;
display: flex;
justify-content: center;
}
.figma-footer-bottom p {
font-weight: 300;
font-size: 16px;
line-height: 25.6px;
color: #191919;
text-align: center;
margin: 0;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.figma-container {
padding: 0 16px;
}
.figma-nav-menu {
flex-direction: column;
gap: 8px;
}
.figma-nav-link {
width: auto;
}
.figma-dropdown-content {
position: static;
display: none;
box-shadow: none;
background-color: #f8f8f8;
margin-top: 8px;
border-radius: 8px;
}
.figma-nav-dropdown:hover .figma-dropdown-content {
display: block;
}
.figma-dropdown-content a {
padding: 8px 16px;
font-size: 14px;
}
.figma-hero h1 {
font-size: 1.75rem;
}
.figma-hero p {
display: none;
font-size: 16px;
}
.figma-section-title {
font-size: 1.75rem;
}
.figma-about-content {
flex-direction: column;
gap: 24px;
}
.figma-about-image {
width: 100%;
order: -1;
}
.figma-about-text h3 {
font-size: 18px;
}
.figma-about-description {
font-size: 16px;
}
.figma-legal-content {
flex-direction: column;
gap: 12px;
}
.figma-legal-card {
width: 100%;
padding: 20px 24px;
gap: 24px;
min-height: 140px;
}
.figma-legal-text h3 {
font-size: 17px;
}
.figma-legal-description {
font-size: 15px;
}
.figma-legal-icon {
width: 56px;
height: 56px;
}
.figma-director-content {
flex-direction: column-reverse;
gap: 24px;
}
.figma-director-image {
width: 100%;
order: -1;
}
.figma-director-text h3 {
font-size: 18px;
}
.figma-director-description {
font-size: 16px;
}
.figma-footer-main {
flex-direction: column;
gap: 30px;
}
.figma-footer-left,
.figma-footer-column {
width: 100%;
}
}
/* Footer - Exact Figma specs */
.footer {
padding: 63px 0 0;
position: relative;
isolation: isolate;
background-color: var(--mode-color-background-gray-subtler-light);
}
.footer-content {
display: flex;
flex-direction: column;
gap: 48px;
position: relative;
z-index: 1;
}
.footer-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.footer-left {
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-logo {
width: 150px;
display: flex;
align-items: center;
}
.footer-logo img {
width: 100%;
height: 100%;
object-fit: contain;
filter: grayscale(1);
}
.footer-info {
font-weight: 300;
font-size: 16px;
line-height: 1.5;
color: var(--text-primary);
}
.footer-right {
display: flex;
width: 58%;
}
.footer-column {
display: flex;
flex-direction: column;
gap: 12px;
width: 50%;
}
.footer-column-inner {
display: flex;
flex-direction: column;
gap: 7px;
}
.footer-section-title {
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: var(--text-primary);
}
.footer-link {
text-decoration: none;
transition: text-decoration 0.2s;
color: var(--mode-color-text-basic-light);
}
.footer-link:hover {
text-decoration: underline;
}
.footer-bottom {
border-top: 1px solid #666666;
padding-top: 32px;
padding-bottom: 32px;
position: relative;
z-index: 1;
}
.footer-copyright {
font-weight: 300;
font-size: 16px;
line-height: 25.6px;
color: var(--text-primary);
text-align: center;
}
/* Responsive Design */
@media (max-width: 1240px) {
.services-container {
flex-wrap: wrap;
}
.service-card {
flex: 0 0 calc(50% - 8px);
min-width: 280px;
}
.map-programs-content {
flex-direction: column;
}
.support-container {
width: 100%;
max-width: none;
}
.map-container {
height: auto;
min-height: 420px;
width: 100%;
}
.programs-container {
width: 100%;
height: auto;
min-height: 400px;
}
.programs-grid {
width: 100%;
height: auto;
}
.program-card.tall,
.program-card.short {
height: auto;
min-height: 160px;
}
.program-description.tall,
.program-description.short {
height: auto;
}
.map-bg-icon {
display: none;
}
}
@media (max-width: 1024px) {
.hero-section {
padding-bottom: 40px;
}
.hero-content {
width: 100%;
max-width: 752px;
text-align: left;
order: 2;
/* 텍스트를 아래로 */
}
.hero-content .mb-4 {
margin-bottom: 0 !important;
}
.hero-title {
font-size: 2.25rem;
}
.hero-title .highlight {
font-size: 2.375rem;
}
.hero-section .d-flex {
flex-direction: column;
}
.hero-image-container {
width: 100%;
max-width: 752px;
margin: 0 auto;
order: 1;
/* 이미지를 위로 */
}
.hero-image {
aspect-ratio: 16/10;
}
.contact-items-wrapper {
flex-direction: row;
gap: 20px;
}
.contact-item {
justify-content: flex-start;
width: auto;
min-width: 240px;
}
.contact-item:first-of-type {
margin-bottom: 8px;
}
.services-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.service-card {
flex: none;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 32px;
}
.hero-title .highlight {
font-size: 2.125rem;
}
.section-title {
font-size: 1.75rem;
}
.programs-grid {
flex-direction: column;
gap: 16px;
}
.program-card {
width: 100%;
}
.footer-main {
flex-direction: column;
gap: 30px;
}
.footer-left {
width: 100%;
}
.footer-right {
flex-direction: column;
gap: 20px;
width: 100%;
}
.footer-column {
width: 100%;
}
/* Hero section mobile optimizations */
.hero-section {
padding: 40px 0 30px;
}
.hero-content {
width: 100%;
text-align: center;
margin-bottom: 30px;
order: 2;
/* 텍스트를 아래로 */
}
.hero-image-container {
width: 100%;
max-width: 400px;
margin: 0 auto 30px auto;
order: 1;
/* 이미지를 위로 */
}
.hero-image {
aspect-ratio: 16/9;
}
.contact-items-wrapper {
flex-direction: column;
gap: 32px;
}
.programs-container {
padding: 0;
border: none;
}
.map-frame {
padding: 0;
box-shadow: none;
}
.services-container {
display: flex;
flex-direction: column;
}
}
/* Main Content Section */
.main-content-section {
padding: 60px 0 0;
}
/* Main Tabs */
.main-tabs {
margin: 0 0 40px;
border-bottom: 1px solid #e9ecef;
padding-bottom: 0;
}
.main-chip-container {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: -1px;
}
.main-chip {
background-color: transparent;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
padding: 16px 32px;
font-size: 18px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s ease;
outline: none;
white-space: nowrap;
}
.main-chip:hover {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.main-chip.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
font-weight: 600;
}
.main-tab-content {
margin-top: 0;
max-width: none;
}
/* Self Test Styles - Updated to match Figma design */
.self-test-container {
width: 100%;
margin: 0;
padding: 0;
}
/* Header Section */
.test-header-section {
padding: 60px 100px;
text-align: center;
}
.test-header-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.test-main-title {
font-size: 32px;
font-weight: 700;
color: #191919;
margin: 0;
line-height: 1.5;
letter-spacing: -0.32px;
}
.test-description-content {
font-size: 1.25rem;
font-weight: 400;
color: #191919;
line-height: 1.5;
letter-spacing: -0.2px;
text-align: center;
}
.test-description-content p {
margin: 0;
}
.test-time-badge {
background-color: #fff5dc;
padding: 8px 16px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 4px;
font-size: 16px;
font-weight: 500;
color: #983a0f;
}
.badge-icon {
font-size: 16px;
}
.badge-text {
font-size: 16px;
}
/* Gender Selection Section */
.gender-selection-section {
background-color: #f8f8f8;
padding: 80px 200px;
width: 100vw;
margin-left: calc(50% - 50vw);
box-sizing: border-box;
}
.gender-selection-content {
display: flex;
flex-direction: column;
gap: 28px;
}
.gender-title-section {
display: flex;
flex-direction: column;
gap: 16px;
}
.gender-title {
font-size: 32px;
font-weight: 700;
color: #191919;
margin: 0;
text-align: center;
line-height: 1.5;
letter-spacing: -0.32px;
}
.gender-description {
font-size: 18px;
font-weight: 400;
color: #4c4c4c;
margin: 0;
text-align: center;
line-height: 1.5;
letter-spacing: -0.18px;
}
.gender-buttons {
display: flex;
justify-content: center;
gap: 16px;
}
.gender-btn {
background-color: #ffffff;
border: 1px solid #69170a;
color: #69170a;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.gender-btn.active {
background-color: #ffd87d;
border-color: #69170a;
color: #69170a;
}
.gender-btn:hover {
background-color: #ffd87d;
}
/* Selected Gender Badge */
.selected-gender-badge {
text-align: center;
padding: 60px 0 26px;
}
.selected-gender-badge span {
background-color: #fff5dc;
padding: 8px 16px;
border-radius: 16px;
font-size: 16px;
font-weight: 500;
color: #983a0f;
}
/* AUDIT Test Form */
.audit-test-form {
padding: 0 0 60px 0;
display: flex;
flex-direction: column;
gap: 26px;
}
/* Test Questions Container */
.test-questions {
display: flex;
flex-direction: column;
gap: 26px;
}
/* Question Cards */
.question-card {
border: 1px solid #cccccc;
border-radius: 8px;
padding: 32px;
background-color: #ffffff;
display: flex;
flex-direction: column;
gap: 24px;
}
.question-header {
display: flex;
align-items: center;
gap: 12px;
}
.question-number {
background-color: #fff5dc;
width: 38px;
height: 38px;
border-radius: 22.5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 700;
color: #3d0303;
flex-shrink: 0;
}
.question-text {
font-size: 1.5rem;
font-weight: 700;
color: #070707;
margin: 0;
line-height: 30px;
letter-spacing: -1.2px;
}
/* Question Options */
.question-options {
display: flex;
gap: 32px;
flex-wrap: wrap;
}
.option-item {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
color: #191919;
line-height: 1.5;
letter-spacing: -0.16px;
}
.option-item input[type="radio"] {
width: 12px;
height: 12px;
margin: 0;
accent-color: #983a0f;
}
.option-item:hover {
color: #983a0f;
}
.option-item input[type="radio"]:checked+.option-text {
color: #983a0f;
font-weight: 600;
}
/* Test Actions */
.test-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 20px;
}
.btn-test-submit,
.btn-test-reset {
font-size: 18px;
font-weight: 700;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-test-submit {
background-color: #ffd87d;
border: 1px solid #ffd87d;
color: #191919;
}
.btn-test-submit:hover {
background-color: #f0c464;
}
.btn-test-reset {
background-color: #ffffff;
border: 1px solid #69170a;
color: #69170a;
}
.btn-test-reset:hover {
background-color: #ffd87d;
}
/* Test Result Styles - Updated */
.test-result {
background-color: #f8f8f8;
border-radius: 8px;
padding: 32px;
text-align: center;
margin-top: 26px;
}
.result-content {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}
.result-score-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.result-score-badge {
border-radius: 4px;
padding: 8px 24px;
font-size: 1.5rem;
font-weight: 700;
line-height: 30px;
letter-spacing: -1.2px;
}
.result-score-badge.normal {
background-color: #e7fdf3;
border: 1px solid #09874a;
color: #056138;
}
.result-score-badge.mild {
background-color: #fff5dc;
border: 1px solid #ffc107;
color: #b8860b;
}
.result-score-badge.moderate {
background-color: #ffe4d6;
border: 1px solid #fd7e14;
color: #cc5500;
}
.result-score-badge.high {
background-color: #f8d7da;
border: 1px solid #dc3545;
color: #721c24;
}
.result-title {
font-size: 32px;
font-weight: 800;
color: #191919;
margin: 0;
line-height: 1.5;
letter-spacing: -1.6px;
}
.result-description {
font-size: 1.5rem;
font-weight: 500;
color: #4c4c4c;
margin: 0;
line-height: 1.5;
letter-spacing: -1.2px;
}
.result-recommendation {
background-color: #ffffff;
border-radius: 8px;
padding: 24px;
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
text-align: center;
}
.recommendation-title {
font-size: 18px;
font-weight: 700;
color: #191919;
margin: 0;
line-height: 1.5;
letter-spacing: -0.9px;
}
.recommendation-text {
font-size: 18px;
font-weight: 500;
color: #191919;
margin: 0;
line-height: 1.5;
letter-spacing: -0.9px;
}
/* Consultation Info Section */
.consultation-info-section {
padding: 40px 0 96px;
}
.consultation-info-content {
background-color: #f8f8f8;
border-radius: 16px;
padding: 48px;
text-align: center;
display: flex;
flex-direction: column;
gap: 16px;
}
.info-header {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding-top: 8px;
}
.info-icon {
font-size: 1.5rem;
}
.info-text {
font-size: 1.875rem;
font-weight: 700;
color: #102902;
line-height: 28px;
}
.info-description {
font-size: 1.25rem;
font-weight: 400;
color: #102902;
margin: 0;
line-height: 32.5px;
max-width: 768px;
margin: 0 auto;
}
/* Subpage Hero Section */
.subpage-hero-section {
background: linear-gradient(90deg, #e9fbfe 0%, #fbfeef 100%);
padding: 60px 0;
overflow: hidden;
position: relative;
isolation: isolate;
}
.subpage-hero-content {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
text-align: center;
}
.subpage-hero-title {
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -0.36px;
line-height: 1.3;
color: var(--text-primary);
margin-bottom: 0;
}
.subpage-hero-description {
font-size: 18px;
font-weight: 300;
letter-spacing: -0.18px;
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: 0;
max-width: 768px;
}
/* Definition Section */
.definition-section {
padding: 60px 0;
}
.definition-card {
background-color: #ffffff;
border: 2px solid #fff5dc;
border-radius: 8px;
padding: 40px;
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
}
.definition-heading {
flex-shrink: 0;
padding-right: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.definition-title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.32px;
line-height: 1.3;
color: #983a0f;
margin: 0;
white-space: nowrap;
}
.definition-content {
flex: 1;
border-left: 1px solid #d9d9d9;
padding-left: 32px;
}
.definition-content p {
font-size: 1.25rem;
font-weight: 300;
letter-spacing: -0.2px;
line-height: 1.5;
color: #191919;
margin-bottom: 0;
}
/* �ߵ� ���� ���� ��Ÿ�� */
.addiction-type-badge {
background-color: #fff5dc;
padding: 8px 16px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 16px;
font-weight: 500;
color: #983a0f;
margin: 24px auto 0;
width: fit-content;
}
.addiction-type-badge .badge-icon {
font-size: 16px;
}
.addiction-type-badge .badge-text {
font-size: 16px;
}
/* ������ */
@media (max-width: 768px) {
.definition-card {
flex-direction: column;
padding: 24px;
gap: 20px;
}
.definition-heading {
padding-right: 0;
padding-bottom: 20px;
width: 100%;
justify-content: flex-start;
}
.definition-title {
font-size: 1.5rem;
white-space: normal;
}
.definition-content {
border-left: none;
border-top: 1px solid #d9d9d9;
padding-left: 0;
padding-top: 20px;
}
.definition-content p {
font-size: 16px;
}
.addiction-type-badge {
font-size: 14px;
padding: 6px 12px;
}
.addiction-type-badge .badge-icon,
.addiction-type-badge .badge-text {
font-size: 14px;
}
}
/* Causes Section */
.causes-section {
padding: 60px 0;
}
.causes-grid {
display: flex;
gap: 16px;
margin-top: 40px;
}
/* 위험 요인 2열 그리드 */
.risk-factors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.risk-factors-grid.unit2 {
grid-template-columns : repeat(2, 1fr);
}
@media (max-width: 768px) {
.risk-factors-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.cause-card {
flex: 1;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.cause-card.center {
align-items: center;
}
.cause-card.center .cause-content {
text-align: center;
}
.cause-icon {
width: 72px;
height: 72px;
background-color: var(--bg-light);
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.cause-icon img {
width: 60px;
height: 60px;
object-fit: contain;
}
.cause-title {
font-size: 18px;
font-weight: 700;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 0;
}
.cause-description {
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: 0;
}
/* Symptoms Section */
.symptoms-section {
padding: 60px 0;
}
.symptoms-grid {
display: flex;
gap: 16px;
margin-top: 40px;
}
.symptom-card {
flex: 1;
background-color: #ffffff;
display: flex;
flex-direction: column;
gap: 18px;
}
.symptom-image {
width: 100%;
height: 252px;
border-radius: 8px;
overflow: hidden;
}
.symptom-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.symptom-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.symptom-title {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.2px;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 0;
}
.symptom-description {
font-size: 16px;
font-weight: 300;
letter-spacing: -0.16px;
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: 0;
}
/* Progression Section */
.progression-section {
padding: 60px 0;
}
.stage-group {
margin-bottom: 60px;
}
.stage-group:last-child {
margin-bottom: 0;
}
.stage-group-title {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.24px;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 18px;
}
.stages-container {
display: flex;
gap: 16px;
}
.stages-container.recovery .stage-card .stage-content {
min-height: 90px;
}
.stage-card {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.stage-number {
width: 38px;
height: 38px;
background-color: var(--border-light);
border-radius: 22.5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 700;
color: #3d0303;
}
.stage-title {
font-size: 19px;
font-weight: 700;
line-height: 1.5;
color: var(--text-primary);
text-align: center;
margin-bottom: 0;
height: 29px;
}
.stage-content {
background-color: var(--bg-light);
border-radius: 12px;
padding: 20px;
width: 100%;
min-height: 80px;
/* �ּ� ���̸� �ٿ��� �������� �°� ���� */
}
.stage-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
/* �ٽɺ��� ����Ʈ ��Ÿ�� */
.core-pathology {
margin: 48px 0;
padding: 32px;
background: #f8f9fa;
border-radius: 16px;
}
.pathology-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.pathology-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 24px;
background: white;
border-radius: 12px;
border: none;
position: relative;
}
.pathology-item:hover {
transform: translateY(-2px);
transition: transform 0.3s ease;
}
.pathology-icon {
font-size: 48px;
line-height: 1;
margin-bottom: 8px;
}
.pathology-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.pathology-name {
font-size: 1.25rem;
font-weight: 700;
color: #1f2937;
margin: 0;
}
.pathology-definition {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #4b5563;
margin: 0;
}
.pathology-source {
font-size: 12px;
font-style: italic;
color: #9ca3af;
margin-top: 8px;
}
/* ����ܰ� Ÿ�Ӷ��� ��Ÿ�� */
.progress-stages {
margin-top: 48px;
}
.stages-subtitle {
font-size: 1.25rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 32px;
text-align: center;
}
.stages-timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
/* �߾� ���μ� */
.stages-timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%);
transform: translateX(-50%);
z-index: 0;
}
.timeline-item {
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: 40px;
width: 100%;
}
.timeline-item:nth-child(odd) {
justify-content: flex-start;
padding-right: 57%;
}
.timeline-item:nth-child(even) {
justify-content: flex-start;
padding-left: 57%;
flex-direction: row-reverse;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-marker {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.marker-number {
width: 60px;
height: 60px;
background: #fbbf24;
color: #92400e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}
.timeline-item:nth-child(2) .marker-number,
.timeline-item:nth-child(7) .marker-number {
background: #f59e0b;
color: #78350f;
}
.timeline-item:nth-child(3) .marker-number {
background: #d97706;
color: #92400e;
}
.timeline-item:nth-child(4) .marker-number {
background: #b45309;
color: #fbbf24;
}
.timeline-item:nth-child(5) .marker-number {
background: var(--primary-color);
color: #fbbf24;
}
.timeline-content {
flex: 1;
background: white;
border-radius: 16px;
padding: 24px;
position: relative;
max-width: 400px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Ȧ�� �� - ������ �θ� ���� */
.timeline-item:nth-child(odd) .timeline-content {
border-right: none;
}
/* ¦�� �� - ���� �θ� ���� */
.timeline-item:nth-child(even) .timeline-content {
border-left: none;
}
/* ���� ��ġ (Ȧ��) - ������ ȭ��ǥ */
.timeline-item:nth-child(odd) .timeline-content::before {
content: '';
position: absolute;
right: -13px;
top: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 12px;
border-color: transparent transparent transparent #e5e7eb;
z-index: 2;
}
.timeline-item:nth-child(odd) .timeline-content::after {
content: '';
position: absolute;
right: -12px;
top: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 12px;
border-color: transparent transparent transparent white;
z-index: 3;
}
/* ���� ��ġ (¦��) - ���� ȭ��ǥ */
.timeline-item:nth-child(even) .timeline-content::before {
content: '';
position: absolute;
left: -13px;
top: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 12px 8px 0;
border-color: transparent #e5e7eb transparent transparent;
z-index: 2;
}
.timeline-item:nth-child(even) .timeline-content::after {
content: '';
position: absolute;
left: -12px;
top: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 12px 8px 0;
border-color: transparent white transparent transparent;
z-index: 3;
}
.timeline-title {
font-size: 1.25rem;
font-weight: 700;
color: #1f2937;
margin: 0 0 8px 0;
}
.timeline-description {
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #6b7280;
margin: 0;
}
.timeline-goal {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #f5f5f5;
margin-top : 16px;
}
.goal-icon {
font-size: 18px;
line-height: 1;
}
.goal-text {
font-size: 14px;
font-weight: 500;
color: #374151;
line-height: 1.4;
}
.stage-reference {
margin-top: 20px;
font-size: 12px;
color: #718096;
text-align: center;
padding: 12px;
background: #f7fafc;
border-radius: 6px;
}
.stage-definition,
.stage-goal {
padding: 20px 16px;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #555;
border-right: 1px solid #e9ecef;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.stage-goal {
border-right: none;
}
.stage-reference {
margin-top: 20px;
font-size: 11px;
color: #666;
text-align: center;
}
.stage-list li {
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: var(--text-primary);
position: relative;
padding-left: 13px;
}
.stage-list li:before {
content: '';
position: absolute;
left: 5px;
top: 13px;
width: 3px;
height: 3px;
background-color: var(--text-secondary);
border-radius: 3px;
}
/* Prevention and Help Section */
.prevention-help-section {
padding: 60px 0;
}
.prevention-help-grid {
display: flex;
gap: 16px;
margin-top: 40px;
}
.help-card {
flex: 1;
border-radius: 20px;
padding: 30px 32px;
display: flex;
align-items: flex-end;
gap: 36px;
min-height: 176px;
}
.help-card.prevention {
background-color: #fff8e5;
}
.help-card.help {
background-color: #ddf2f7;
}
.help-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 9px;
height : 100%
}
.help-title {
font-size: 19px;
font-weight: 700;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 0;
}
.help-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 17px;
font-weight: 400;
color: var(--text-primary);
}
.help-list li {
line-height: 1.5;
position: relative;
padding-left: 25.5px;
}
.help-list li:before {
content: '';
width: 3px;
height: 3px;
position: absolute;
top: 10px;
left: 3px;
border-radius: 50%;
background-color: var(--mode-color-border-gray-dark-light);
}
.help-icon {
width: 72px;
height: 72px;
flex-shrink: 0;
}
.help-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Support Centers Section - Updated */
.support-centers-section {
padding: 80px 0;
}
/* Center Chips */
.center-chips {
margin: 40px 0 0;
}
.chip-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.chip {
border: 1px solid #e0e0e0;
border-radius: 24px;
padding: 12px 20px;
font-size: 15px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
outline: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.chip:hover {
background-color: rgba(152, 58, 15, 0.05);
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.chip.active {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: #ffffff;
box-shadow: 0 4px 12px rgba(152, 58, 15, 0.3);
}
.chip.active:hover {
background-color: var(--primary-color);
color: #ffffff;
transform: translateY(-1px);
}
.chip-text {
font-weight: 500;
}
.chip-count {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 2px 8px;
font-size: 12px;
font-weight: 600;
min-width: 20px;
text-align: center;
}
.chip.active .chip-count {
background-color: rgba(255, 255, 255, 0.25);
color: #ffffff;
}
.chip:not(.active) .chip-count {
background-color: #f5f5f5;
color: var(--text-secondary);
}
.chip:hover:not(.active) .chip-count {
background-color: rgba(152, 58, 15, 0.1);
color: var(--primary-color);
}
/* Tab Content */
.tab-content {
margin-top: 32px;
}
/* Center List */
.map-section {
height: 500px;
}
.center-list {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 1200px;
margin: 0 auto;
}
.center-item {
border: 1px solid var(--mode-color-border-gray-light-light);
border-radius: 12px;
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
transition: all 0.2s ease;
min-height: auto;
}
.center-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
border-color: var(--mode-color-border-primary-light);
}
.center-item-main {
flex: 1;
min-width: 0;
max-width: 450px;
}
.center-item-title {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 6px;
line-height: 1.3;
}
.center-item-address {
font-size: 14px;
font-weight: 400;
color: var(--text-secondary);
margin-bottom: 0;
line-height: 1.4;
word-break: keep-all;
overflow-wrap: break-word;
}
.center-item-contact {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 300px;
}
.contact-row {
display: flex;
gap: 16px;
}
.contact-group {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
.contact-label {
font-size: 14px;
flex-shrink: 0;
width: 20px;
text-align: center;
}
.contact-value {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
text-decoration: none;
transition: color 0.2s ease;
min-width: 0;
}
.contact-value:hover {
color: var(--primary-color);
}
.center-item-actions {
flex-shrink: 0;
align-self: center;
}
.btn-center-link {
font-size: 13px;
font-weight: 600;
color: var(--primary-color);
background-color: transparent;
border: 1px solid var(--primary-color);
border-radius: 6px;
padding: 8px 14px;
text-decoration: none;
transition: all 0.2s ease;
display: inline-block;
white-space: nowrap;
}
.btn-center-link:hover {
background-color: var(--primary-color);
color: #ffffff;
}
/* Responsive Design for Center Chips */
@media (max-width: 768px) {
.chip-container {
justify-content: flex-start;
gap: 16px 8px;
}
.chip {
font-size: 14px;
padding: 10px 16px;
border-radius: 20px;
}
.chip-count {
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
}
.center-list {
max-width: none;
}
.center-item {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 16px 20px;
}
.center-item-main {
width: 100%;
max-width: none;
}
.center-item-contact {
width: 100%;
min-width: auto;
max-width: none;
}
.contact-row {
flex-direction: column;
gap: 8px;
}
.contact-group {
justify-content: flex-start;
}
.contact-label {
width: auto;
min-width: 20px;
}
.contact-value {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.center-item-actions {
align-self: stretch;
}
.btn-center-link {
width: 100%;
text-align: center;
}
}
@media (max-width: 480px) {
.chip {
font-size: 13px;
padding: 8px 14px;
}
.chip-text {
font-weight: 500;
}
.center-item {
padding: 14px 16px;
}
.center-item-title {
font-size: 16px;
}
.center-item-address {
font-size: 12px;
}
.contact-value {
font-size: 12px;
}
}
/* Responsive Design for Subpages */
@media (max-width: 1240px) {
.definition-card {
flex-direction: column;
gap: 30px;
}
.definition-content {
padding-left: 0;
border-left: none;
border-top: 1px solid #d9d9d9;
padding-top: 30px;
}
.causes-grid {
flex-direction: column;
gap: 24px;
}
.cause-card {
align-items: flex-start;
gap: 20px;
}
.symptoms-grid {
flex-wrap: wrap;
}
.symptom-card {
flex: 0 0 calc(50% - 8px);
min-width: 280px;
}
.stages-container {
flex-wrap: wrap;
gap: 24px;
}
.stage-card {
flex: 0 0 calc(50% - 12px);
min-width: 280px;
}
.prevention-help-grid {
flex-direction: column;
}
.centers-grid {
justify-content: center;
}
.center-card {
flex: 0 0 calc(50% - 8px);
min-width: 300px;
}
}
@media (max-width: 768px) {
.subpage-hero-title {
font-size: 1.75rem;
}
.subpage-hero-description {
display: none;
}
.main-chip-container {
justify-content: center;
}
.main-chip {
font-size: 16px;
padding: 12px 20px;
}
/* Mobile Prevention Help Styles */
.help-title {
font-size: 1.25rem;
margin-bottom: 16px;
}
.help-list {
font-size: 14px;
}
.help-list li {
margin-bottom: 8px;
padding-left: 20px;
}
.help-icon {
width: 60px;
height: 60px;
margin-top: 16px;
}
.help-icon img {
width: 100%;
height: 100%;
}
/* Mobile Self Test Styles */
.test-header-section {
padding: 40px 20px;
}
.test-main-title {
font-size: 1.5rem;
}
.test-description-content {
font-size: 16px;
}
.test-time-badge {
font-size: 14px;
padding: 8px 16px;
}
.gender-selection-section {
padding: 60px 20px;
margin-left: calc(50% - 50vw);
width: 100vw;
box-sizing: border-box;
}
.gender-title {
font-size: 1.5rem;
}
.gender-description {
font-size: 16px;
}
.gender-title-section {
text-align: center;
margin-bottom: 24px;
}
.gender-buttons {
flex-direction: column;
align-items: center;
}
.gender-btn {
width: 200px;
font-size: 16px;
}
.selected-gender-badge {
padding: 40px 0 20px;
}
.audit-test-form {
padding: 0 0 40px 0;
gap: 20px;
}
.test-questions {
gap: 20px;
}
.question-card {
padding: 20px;
gap: 16px;
}
.question-number {
width: 32px;
height: 32px;
font-size: 16px;
}
.question-text {
font-size: 18px;
line-height: 1.4;
letter-spacing: -0.5px;
}
.question-options {
flex-direction: column;
gap: 12px;
}
.option-item {
font-size: 14px;
padding: 8px;
}
.test-actions {
flex-direction: column;
align-items: center;
gap: 8px;
}
.btn-test-submit,
.btn-test-reset {
width: 200px;
font-size: 16px;
}
.test-result {
padding: 20px;
margin-top: 20px;
}
.result-score-badge {
font-size: 1.25rem;
padding: 6px 20px;
}
.result-title {
font-size: 1.5rem;
}
.result-description {
font-size: 18px;
}
.result-recommendation {
padding: 16px;
}
.recommendation-title,
.recommendation-text {
font-size: 16px;
}
.consultation-info-section {
padding: 30px 20px 60px;
}
.consultation-info-content {
padding: 30px 20px;
}
.info-text {
font-size: 1.25rem;
line-height: 1.3;
}
.info-description {
font-size: 16px;
line-height: 1.4;
}
.core-pathology {
margin: 32px 0;
padding: 24px 16px;
}
.pathology-list {
grid-template-columns: 1fr;
gap: 24px;
}
.pathology-item {
gap: 16px;
padding: 20px;
}
.pathology-icon {
font-size: 2.25rem;
}
.pathology-name {
font-size: 18px;
}
.pathology-definition {
font-size: 13px;
}
.pathology-source {
font-size: 11px;
}
.progress-stages {
margin-top: 32px;
}
.stages-subtitle {
font-size: 1.25rem;
margin-bottom: 24px;
}
.core-pathology {
margin: 32px 0;
padding: 24px 16px;
}
.pathology-list {
grid-template-columns: 1fr;
gap: 24px;
}
.pathology-item {
gap: 16px;
padding: 20px;
}
.pathology-icon {
font-size: 2.25rem;
}
.pathology-name {
font-size: 18px;
}
.pathology-definition {
font-size: 13px;
}
.pathology-source {
font-size: 11px;
}
.progress-stages {
margin-top: 32px;
}
.stages-subtitle {
font-size: 1.25rem;
margin-bottom: 24px;
}
.stages-timeline::before {
left: 25px !important;
transform: none !important;
}
.timeline-item {
padding-left: 60px !important;
padding-right: 0 !important;
margin-bottom: 32px;
justify-content: flex-start !important;
flex-direction: row !important;
}
.timeline-marker {
left: 0 !important;
transform: none !important;
width: 50px;
height: 50px;
}
.timeline-content {
border: 1px solid #e5e7eb !important;
border-left: 4px solid var(--primary-color) !important;
}
.timeline-item:nth-child(odd) .timeline-content::before,
.timeline-item:nth-child(odd) .timeline-content::after,
.timeline-item:nth-child(even) .timeline-content::before,
.timeline-item:nth-child(even) .timeline-content::after {
display: none !important;
}
.timeline-marker {
left: 0 !important;
transform: none !important;
width: 50px;
height: 50px;
}
.marker-number {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.timeline-content {
max-width: none;
padding: 20px;
}
.timeline-content::before {
left: -10px !important;
right: auto !important;
border-width: 6px 10px 6px 0 !important;
border-color: transparent white transparent transparent !important;
}
.timeline-title {
font-size: 18px;
}
.timeline-description {
font-size: 14px;
}
.timeline-goal {
padding: 10px 12px;
}
.goal-text {
font-size: 13px;
}
}
@media (max-width:478px){
.risk-factors-grid {
grid-template-columns: repeat(1,1fr);
}
}
/* Digital Addiction Styles - Updated to match other pages */
.symptoms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.symptom-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 24px;
text-align: center;
transition: all 0.3s ease;
}
.symptom-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(152, 58, 15, 0.15);
border-color: #983a0f;
}
.symptom-icon {
font-size: 2.5rem;
margin-bottom: 16px;
display: block;
}
.symptom-title {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin-bottom: 12px;
}
.symptom-description {
font-size: 0.95rem;
color: #666;
line-height: 1.5;
margin: 0;
}
/* Digital Self Test Styles - Figma Design */
/* ==================== MISSION AND VISION PAGE STYLES ==================== */
/* Mission Hero Section */
.figma-mission-hero {
background: linear-gradient(135deg, #e9fbfe 0%, #fbfeef 100%);
padding: 60px 0;
position: relative;
top: 83px;
}
.figma-mission-hero-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.figma-mission-hero-title {
font-weight: bold;
font-size: 2.25rem;
line-height: 1.3;
color: #191919;
letter-spacing: -0.36px;
margin: 0;
}
.figma-mission-hero-subtitle {
font-weight: 300;
font-size: 18px;
line-height: 1.5;
color: #4c4c4c;
letter-spacing: -0.18px;
margin: 0;
text-align: center;
}
/* Mission Section */
.figma-mission-section {
padding: 60px 0;
position: relative;
background: white;
}
.figma-mission-title {
font-weight: bold;
font-size: 2.25rem;
line-height: 1.5;
color: #191919;
letter-spacing: -0.36px;
text-align: center;
margin: 0 0 40px 0;
}
/* Mission Values Grid */
.figma-mission-values {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-bottom: 80px;
position: relative;
z-index: 4;
}
.figma-mission-value {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
gap: 12px;
text-align: center;
}
.figma-mission-icon {
width: 72px;
height: 72px;
background: #f8f8f8;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.figma-mission-icon img {
width: 60px;
height: 60px;
object-fit: cover;
}
.figma-mission-icon div {
border-radius: 50%;
}
.figma-mission-text {
display: flex;
flex-direction: column;
gap: 8px;
text-align: center;
}
.figma-mission-text h3 {
font-weight: bold;
font-size: 18px;
line-height: 1.5;
color: #191919;
margin: 0;
white-space: nowrap;
}
.figma-mission-text p {
font-weight: 500;
font-size: 14px;
line-height: 1.5;
color: #191919;
margin: 0;
text-align: center;
word-wrap: break-word;
}
/* Vision Circle */
.figma-vision-circle {
width: 440px;
height: 220px;
background: #fff5dc;
border-radius: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
margin: 0 auto 80px auto;
position: relative;
z-index: 3;
}
.figma-vision-logo {
width: 140px;
height: 79px;
display: flex;
align-items: center;
justify-content: center;
}
.figma-vision-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.figma-vision-text {
text-align: center;
}
.figma-vision-text p {
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: black;
margin: 0;
white-space: pre-line;
}
/* Vision Statement */
.figma-vision-statement {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.figma-vision-statement h3 {
font-weight: bold;
font-size: 1.5rem;
line-height: 1.5;
color: black;
border: 1px solid #d9d9d9;
border-radius: 8px;
padding: 24px 32px;
margin: 0;
white-space: nowrap;
background: white;
}
/* Mission Connection Lines */
.figma-mission-lines {
position: absolute;
top: 380px;
left: 50%;
transform: translateX(-50%);
width: 1050px;
height: 387px;
z-index: 1;
pointer-events: none;
}
.figma-mission-lines svg {
width: 100%;
height: 100%;
}
/* Symbols Section */
.figma-symbols-section {
padding: 60px 0;
background: white;
}
.figma-symbols-title {
font-weight: bold;
font-size: 2.25rem;
line-height: 1.5;
color: #191919;
letter-spacing: -0.36px;
text-align: center;
margin: 0 0 40px 0;
}
.figma-symbols-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.figma-symbol-item {
background: #f8f8f8;
border-radius: 20px;
padding: 30px 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
min-height: 176px;
justify-content: center;
}
.figma-symbol-item h3 {
font-weight: bold;
font-size: 19px;
line-height: 1.5;
color: #191919;
margin: 0;
width: 100%;
text-align: left;
}
.figma-symbol-image {
width: 100%;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.figma-symbol-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Responsive Design for Mission and Vision */
@media (max-width: 1240px) {
.figma-mission-values {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.figma-vision-circle {
width: 360px;
height: 180px;
}
.figma-vision-logo {
width: 120px;
height: 68px;
}
.figma-vision-text p {
font-size: 16px;
}
.figma-mission-lines {
display: none;
}
}
@media (max-width: 768px) {
.figma-mission-hero {
padding: 40px 0;
}
.figma-mission-hero-title {
font-size: 1.75rem;
}
.figma-mission-hero-subtitle {
font-size: 16px;
}
.figma-mission-title,
.figma-symbols-title {
font-size: 1.75rem;
}
.figma-mission-values {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 60px;
}
.figma-mission-value {
padding: 16px 20px;
}
.figma-mission-icon {
width: 60px;
height: 60px;
}
.figma-mission-icon img {
width: 50px;
height: 50px;
}
.figma-mission-text h3 {
font-size: 16px;
}
.figma-mission-text p {
font-size: 13px;
}
.figma-vision-circle {
width: 300px;
height: 150px;
margin-bottom: 60px;
}
.figma-vision-logo {
width: 100px;
height: 56px;
}
.figma-vision-text p {
font-size: 14px;
}
.figma-vision-statement h3 {
font-size: 1.25rem;
padding: 20px 24px;
}
.figma-symbol-item {
padding: 24px 20px;
min-height: 140px;
}
.figma-symbol-item h3 {
font-size: 17px;
}
.figma-symbol-image {
height: 100px;
}
}
@media (max-width: 480px) {
.figma-mission-values {
grid-template-columns: 1fr;
gap: 16px;
}
.figma-vision-circle {
width: 280px;
height: 140px;
}
.figma-vision-logo {
width: 90px;
height: 50px;
}
.figma-vision-text p {
font-size: 13px;
}
.figma-vision-statement h3 {
font-size: 18px;
padding: 16px 20px;
}
}
/* ==================== OPERATING SYSTEM PAGE STYLES ==================== */
/* Operating System Section */
.figma-operating-section {
padding: 60px 0;
background: white;
}
.figma-operating-diagram {
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0;
position: relative;
}
.figma-operating-image {
max-width: 100%;
height: auto;
display: none;
}
/* Desktop Image (default) */
.figma-operating-image.desktop {
display: block;
max-width: 1200px;
}
/* Contact Section */
.figma-contact-section {
padding: 80px 0;
background: white;
}
.figma-contact-card {
background: #f8f8f8;
border-radius: 16px;
padding: 48px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
text-align: center;
max-width: 768px;
margin: 0 auto;
}
.figma-contact-header {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}
.figma-contact-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.figma-contact-card h3 {
font-weight: bold;
font-size: 1.875rem;
line-height: 28px;
color: #102902;
margin: 0;
white-space: nowrap;
letter-spacing: -0.2px;
}
.figma-contact-card p {
font-weight: 400;
font-size: 1.25rem;
line-height: 32.5px;
color: #102902;
margin: 0;
white-space: nowrap;
letter-spacing: -0.2px;
}
/* Responsive Design for Operating System */
@media (max-width: 1240px) {
.figma-operating-image.desktop {
display: none;
}
.figma-operating-image.tablet {
display: block;
max-width: 900px;
}
}
@media (max-width: 768px) {
.figma-operating-section {
padding: 40px 0;
}
.figma-operating-image.tablet {
display: none;
}
.figma-operating-image.mobile {
display: block;
max-width: 100%;
width: 80%;
}
.figma-contact-section {
padding: 60px 0;
}
.figma-contact-card {
padding: 32px 24px;
margin: 0 16px;
}
.figma-contact-header {
flex-direction: column;
gap: 12px;
}
.figma-contact-card h3 {
font-size: 1.5rem;
line-height: 1.2;
white-space: normal;
text-align: center;
}
.figma-contact-card p {
font-size: 16px;
line-height: 1.5;
white-space: normal;
}
}
@media (max-width: 480px) {
.figma-contact-card h3 {
font-size: 1.25rem;
}
.figma-contact-card p {
font-size: 14px;
}
}
/* Directions Page Styles */
.figma-directions-section {
background-color: #ffffff;
padding: 60px 0;
}
.figma-map-container {
margin-bottom: 40px;
}
.figma-map-frame {
position: relative;
width: 100%;
height: 500px;
border-radius: 12px;
overflow: hidden;
background-color: var(--mode-color-background-gray-subtle-light);
}
.figma-map-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-color: var(--mode-color-background-gray-subtle-light);
color: var(--mode-color-border-gray-dark-light);
font-size: 18px;
font-weight: 500;
}
.figma-map-placeholder small {
margin-top: 8px;
font-size: 14px;
font-weight: 400;
}
.figma-map-controls {
position: absolute;
top: 10px;
left: 10px;
}
.figma-map-btn {
background-color: #ffffff;
border: 2px solid #ffffff;
border-radius: 2px;
padding: 8px 14px 5px;
font-size: 12px;
font-weight: 300;
color: var(--mode-color-text-information-light);
cursor: pointer;
box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3);
text-decoration: none;
letter-spacing: -0.12px;
line-height: 1.5;
}
.figma-map-btn:hover {
background-color: #f8f9fa;
}
.figma-zoom-controls {
position: absolute;
bottom: 105px;
right: 50px;
display: flex;
flex-direction: column;
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.figma-zoom-btn {
width: 40px;
height: 40px;
background-color: #ffffff;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.25rem;
font-weight: 400;
color: #666666;
}
.figma-zoom-btn:first-child {
border-bottom: 1px solid var(--mode-color-background-gray-subtle-light);
}
.figma-zoom-btn:hover {
background-color: #f8f9fa;
}
/* Location Information */
.figma-location-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.figma-info-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.figma-info-header {
display: flex;
align-items: center;
gap: 8px;
}
.figma-info-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.figma-info-icon img {
width: 100%;
}
.figma-info-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: #191919;
margin: 0;
letter-spacing: -0.24px;
line-height: 1.5;
}
.figma-info-content {
margin-left: 32px;
}
.figma-info-content ul li,
.figma-info-content p {
font-size: 18px;
font-weight: 400;
color: #4c4c4c;
letter-spacing: -0.18px;
line-height: 1.5;
margin: 0;
}
/* Subway Badges */
.figma-subway-badges {
display: flex;
gap: 4px;
margin-bottom: 4px;
}
.figma-badge {
display: inline-block;
padding: 2px 8px 1px;
border-radius: 16px;
font-size: 12px;
font-weight: 600;
color: #ffffff;
letter-spacing: -0.12px;
line-height: 1.5;
}
.figma-badge.line-7 {
background-color: var(--mode-color-graphic-green-dark-light);
}
.figma-badge.line-bundang {
background-color: var(--mode-color-text-danger-light);
}
.figma-badge.bus-main {
background-color: var(--mode-color-graphic-yellow-dark-light);
}
.figma-badge.bus-branch {
background-color: var(--mode-color-graphic-green-dark-light);
}
.figma-badge.bus-village {
background-color: var(--mode-color-graphic-green-dark-light);
}
/* Bus Information */
.figma-bus-stop {
margin-bottom: 16px;
}
.figma-bus-stop:last-child {
margin-bottom: 0;
}
.figma-bus-routes {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
.figma-bus-group {
display: flex;
align-items: center;
gap: 4px;
}
.figma-bus-numbers {
font-size: 18px;
font-weight: 400;
color: #4c4c4c;
letter-spacing: -0.18px;
line-height: 1.5;
}
.text-highlight {
color: var(--mode-color-text-primary-light);
font-weight: 600;
}
/* Utility Classes for Index Page */
.section-header-spacing {
margin-bottom: 32px;
}
.map-info-spacing {
padding: 18px 0;
}
.map-iframe {
border: 0;
border-radius: 8px;
}
.figma-map-iframe {
border: 0;
border-radius: 12px;
}
.symbol-placeholder {
width: 247px;
height: 140px;
background: var(--mode-color-background-gray-subtle-light);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--mode-color-border-gray-dark-light);
font-size: 16px;
}
/* Responsive Directions */
@media (max-width: 768px) {
.figma-directions-section {
padding: 40px 0;
}
.figma-map-frame {
height: 300px;
}
.figma-info-header h3 {
font-size: 1.25rem;
}
.figma-info-content {
margin-left: 28px;
}
.figma-info-content ul li,
.figma-info-content p {
font-size: 16px;
}
.figma-bus-numbers {
font-size: 16px;
}
.figma-location-info {
gap: 20px;
}
}
/* Footer */
.figma-footer {
background-color: #ffffff;
padding-top: 63px;
padding-bottom: 64px;
}
.figma-footer-content {
display: flex;
flex-direction: column;
gap: 48px;
}
.figma-footer-main {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.figma-footer-left {
flex: 1;
max-width: 592px;
display: flex;
flex-direction: column;
gap: 16px;
}
.figma-footer-logo {
width: 100px;
height: 56px;
}
.figma-footer-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.figma-footer-info {
color: #191919;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
}
.figma-footer-column {
width: 280px;
display: flex;
flex-direction: column;
gap: 12px;
}
.figma-footer-column h4 {
color: #191919;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
.figma-footer-column p {
color: #191919;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
margin: 0;
}
.figma-footer-bottom {
border-top: 1px solid #666666;
padding-top: 32px;
text-align: center;
}
.figma-footer-bottom p {
color: #191919;
font-size: 1rem;
font-weight: 300;
line-height: 25.6px;
margin: 0;
}
/* ===== SCROLL ANIMATIONS ===== */
/* Fade in from bottom animation */
.scroll-fade-in {
opacity: 0;
transform: translateY(2rem);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Slide in from left animation */
.scroll-slide-left {
opacity: 0;
transform: translateX(-2rem);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-slide-left.visible {
opacity: 1;
transform: translateX(0);
}
/* Slide in from right animation */
.scroll-slide-right {
opacity: 0;
transform: translateX(2rem);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-slide-right.visible {
opacity: 1;
transform: translateX(0);
}
/* Scale up animation */
.scroll-scale-up {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-scale-up.visible {
opacity: 1;
transform: scale(1);
}
/* Staggered animation for service cards */
.service-card {
transition-delay: 0s;
}
.service-card:nth-child(1) {
transition-delay: 0.1s;
}
.service-card:nth-child(2) {
transition-delay: 0.2s;
}
.service-card:nth-child(3) {
transition-delay: 0.3s;
}
.service-card:nth-child(4) {
transition-delay: 0.4s;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.scroll-fade-in,
.scroll-slide-left,
.scroll-slide-right,
.scroll-scale-up {
transition: none;
opacity: 1;
transform: none;
}
}
/* Support Centers Page Styles */
.center-list-item {
cursor: pointer;
transition: background 0.2s;
font-size: 18px;
padding: 24px;
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 16px;
color: var(--mode-color-text-subtle-light);
}
.center-list-item strong {
font-size: 24px;
color: var(--mode-color-text-basic-light);
}
.center-list-item:hover {
background: var(--mode-color-border-primary-light-light);
box-shadow: 0 4px 16px rgba(152, 58, 15, 0.1);
}
.center-list-item .btn-center-link {
width: fit-content;
}
.map-section {
margin-bottom: 32px;
}
.map-iframe {
width: 100%;
height: 500px;
border: 0;
border-radius: 12px;
}
.support-centers-section .nav-tabs {
border-bottom: 2px solid var(--mode-color-border-primary-light);
gap: 8px;
border-radius: 12px 12px 0 0;
padding: 8px 12px 0 12px;
box-shadow: none;
display: flex;
justify-content: center;
align-items: center;
}
.support-centers-section .nav-tabs .nav-link {
font-size: 18px;
font-weight: 500;
color: var(--mode-color-text-basic);
background: transparent;
border: none;
border-radius: 12px 12px 0 0;
padding: 12px 28px;
margin-bottom: -2px;
transition: background 0.2s, color 0.2s;
box-shadow: none;
letter-spacing: -0.5px;
}
.support-centers-section .nav-tabs .nav-link.active {
color: var(--mode-color-text-basic);
background: var(--mode-color-graphic-yellow-light);
font-weight: 700;
border-bottom: 2.5px solid var(--mode-color-border-primary-light);
z-index: 2;
}
.support-centers-section .nav-tabs .nav-link:hover:not(.active) {
color: var(--mode-color-text-primary-light);
}
.support-centers-section .tab-content {
border-radius: 0 0 12px 12px;
box-shadow: none;
padding: 24px 0;
margin-bottom: 24px;
}
@media (max-width: 991px) {
.support-centers-section .nav-tabs {
flex-wrap: nowrap;
overflow-x: auto;
padding: 4px 4px 0 4px;
gap: 4px;
}
.support-centers-section .nav-tabs .nav-link {
min-width: 120px;
font-size: 15px;
padding: 12px 20px;
white-space: nowrap;
}
.support-centers-section .tab-content {
padding: 0 24px;
font-size: 15px;
}
.support-centers-section .center-list {
gap: 32px;
}
.support-centers-section .center-list-item {
font-size: 15px;
padding: 24px;
}
}
@media (max-width: 768px) {
.support-centers-section .nav-tabs .nav-link {
font-size: 16px;
padding: 10px 12px;
}
.support-centers-section .tab-content {
padding: 16px 4px 4px 4px;
}
}
@media (max-width: 768px) {
.support-centers-section .nav-tabs {
border-radius: 8px 8px 0 0;
padding: 2px 0 0 240px;
}
.support-centers-section .nav-tabs .nav-link {
min-width: 90px;
padding: 8px 12px;
border-radius: 8px 8px 0 0;
}
.support-centers-section .tab-content {
border-radius: 0 0 8px 8px;
padding: 8px 0 0 0;
font-size: 13px;
}
.support-centers-section .center-list-item {
font-size: 13px;
}
}
/* Digital Addiction Test Modal Styles */
.modal-content {
border-radius: 16px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.modal-header {
background: linear-gradient(135deg, var(--mode-color-graphic-yellow-subtle-light), var(--mode-color-graphic-green-subtle-light));
color: var(--text-primary);
border-radius: 16px 16px 0 0;
border-bottom: none;
padding: 20px 24px;
}
.modal-title {
font-weight: 700;
font-size: 20px;
margin: 0;
}
.modal-body {
padding: 0 24px;
}
.modal-footer {
border-top: 1px solid var(--border-light);
padding: 16px 24px 24px 24px;
gap: 4px;
}
.modal-footer .btn {
border-radius: 8px;
padding: 8px 20px;
font-weight: 600;
}
.modal-footer .btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.modal-footer .btn-primary:hover {
background-color: var(--mode-color-button-tertiary-border-light);
border-color: var(--mode-color-button-tertiary-border-light);
}
/* Result content in modal */
.modal .result-content {
text-align: center;
}
.modal .result-score-section {
margin-bottom: 24px;
}
.modal .result-score-badge {
display: inline-block;
border-radius: 50px;
font-size: 18px;
font-weight: 700;
margin-bottom: 0;
}
.modal .result-title {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.modal .result-description {
font-size: 16px;
color: var(--text-secondary);
margin-bottom: 0;
line-height: 1.5;
}
.modal .result-recommendation {
background-color: var(--bg-light);
padding: 20px;
border-radius: 12px;
text-align: left;
}
.modal .recommendation-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.modal .recommendation-text {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
/* Figma 기반 모달 결과 디자인 (공통 사용) */
.modal-result-content {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
padding: 32px 12px;
border-radius: 8px;
width: 100%;
}
.modal-result-inner {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
width: 100%;
}
.modal-result-score {
font-weight: 700;
font-size: 24px;
line-height: 30px;
color: #056138;
letter-spacing: -1.2px;
margin: 0;
}
.modal-result-title {
font-weight: 800;
font-size: 32px;
line-height: 1.5;
color: #191919;
letter-spacing: -1.6px;
margin: 0;
}
.modal-result-description {
font-weight: 500;
font-size: 24px;
line-height: 1.5;
color: #4c4c4c;
letter-spacing: -1.2px;
margin: 0;
}
.modal-result-recommend-box {
background: var(--mode-color-background-gray-subtler-light);
border-radius: 8px;
width: 100%;
}
.modal-result-recommend-inner {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
padding: 24px;
}
.modal-result-recommend-title {
font-weight: 700;
font-size: 18px;
color: #191919;
margin: 0;
}
.modal-result-recommend-text {
font-weight: 500;
font-size: 18px;
color: #191919;
margin: 0;
}
/* 반응형 모달 개선 (모바일 대응) */
@media (max-width: 768px) {
.modal-dialog {
margin: 0;
max-width: 100vw;
min-width: 100vw;
height: 100vh;
display: flex;
align-items: flex-end;
}
.modal-content {
border-radius: 16px 16px 0 0 !important;
min-height: 40vh;
max-height: 90vh;
width: 100vw;
padding-bottom: env(safe-area-inset-bottom, 16px);
}
.modal-header,
.modal-body,
.modal-footer {
padding-left: 16px !important;
padding-right: 16px !important;
}
.modal-header {
border-radius: 16px 16px 0 0 !important;
padding-top: 20px !important;
padding-bottom: 12px !important;
}
.modal-title {
font-size: 18px !important;
}
.modal-footer .btn {
width: 100%;
font-size: 1.1rem;
padding: 14px 0;
}
.btn-close {
width: 2.5rem;
height: 2.5rem;
background-size: 1.5rem 1.5rem;
top: 8px;
right: 8px;
}
.modal-result-content {
padding: 20px 0 0 0;
border-radius: 0;
}
.modal-result-inner {
gap: 16px;
}
.modal-result-title {
font-size: 22px;
}
.modal-result-description {
font-size: 16px;
}
.modal-result-score {
font-size: 18px;
}
.modal-result-recommend-inner {
padding: 16px 8px;
}
.modal-result-recommend-title,
.modal-result-recommend-text {
font-size: 15px;
}
.modal.fade .modal-dialog {
transform: translateY(100vh);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.fade.show .modal-dialog {
transform: translateY(0);
}
}
/* Footer Family Site Dropdown */
.footer-family-site {
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-family-select {
width: 100%;
padding: 8px 36px 8px 14px;
font-size: 15px;
border: 1.5px solid #e0e0e0;
border-radius: 8px;
background: #fafbfc url('data:image/svg+xml;utf8,') no-repeat right 12px center/18px 18px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
color: #222;
transition: border 0.2s;
box-sizing: border-box;
}
.footer-family-select:focus {
outline: none;
border-color: var(--mode-color-border-primary-light);
}
.footer-family-site label {
font-size: 15px;
color: #666;
font-weight: 500;
margin-bottom: 2px;
}
/* =============================
상담·지원받기 (피그마 기준)
============================= */
.consult-support-figma-bg {
background: #fff;
min-height: 100vh;
}
.consult-support-figma-container {
max-width: 1920px;
margin: 0 auto;
box-sizing: border-box;
}
.consult-support-figma-hero {
background: linear-gradient(90deg, #e9fbfe 0%, #fbfeef 100%);
border-radius: 24px;
padding: 60px 0 60px 0;
margin-bottom: 40px;
text-align: center;
}
.consult-support-figma-title {
font-size: 36px;
font-weight: 700;
color: #191919;
margin-bottom: 16px;
letter-spacing: -0.36px;
}
.consult-support-figma-desc p {
font-size: 18px;
color: #4c4c4c;
margin: 0;
}
.consult-support-figma-info {
display: flex;
gap: 40px;
justify-content: center;
margin-bottom: 60px;
flex-wrap: wrap;
}
.consult-support-figma-info-card {
background: #f8f8f8;
border-radius: 20px;
box-shadow: 0 2px 8px 0 rgba(55, 65, 81, 0.05);
padding: 30px 32px;
min-width: 240px;
max-width: 292px;
flex: 1 1 240px;
text-align: left;
display: flex;
flex-direction: column;
gap: 9px;
}
.consult-support-figma-info-title {
font-size: 19px;
font-weight: 700;
color: #191919;
}
.consult-support-figma-info-content {
font-size: 17px;
color: #4c4c4c;
}
.consult-support-figma-section-title {
font-size: 36px;
font-weight: 700;
color: #191919;
text-align: center;
margin-bottom: 40px;
letter-spacing: -0.36px;
}
.consult-support-figma-process-list {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 32px;
flex-wrap: wrap;
}
.consult-support-figma-process-item {
background: #fff5dc;
border-radius: 22.5px;
box-shadow: 0 2px 8px 0 rgba(55, 65, 81, 0.05);
padding: 28px 32px;
min-width: 240px;
max-width: 320px;
flex: 1 1 240px;
display: flex;
align-items: flex-start;
gap: 18px;
}
.consult-support-figma-step-num {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #3d0303;
font-size: 20px;
font-weight: 700;
border-radius: 50%;
width: 38px;
height: 38px;
flex-shrink: 0;
box-shadow: 0 1px 4px 0 rgba(55, 65, 81, 0.08);
}
.consult-support-figma-step-title {
font-size: 20px;
font-weight: 700;
color: #191919;
margin-bottom: 8px;
}
.consult-support-figma-process-item ul {
margin: 0;
padding-left: 18px;
color: #4c4c4c;
font-size: 16px;
}
.consult-support-figma-type-wrap {
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;
}
.consult-support-figma-type-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 2px 8px 0 rgba(55, 65, 81, 0.05);
padding: 32px 36px;
min-width: 320px;
max-width: 400px;
flex: 1 1 320px;
}
.consult-support-figma-type-title {
font-size: 24px;
font-weight: 700;
color: #191919;
margin-bottom: 14px;
}
.consult-support-figma-type-card ul {
margin: 0;
padding-left: 20px;
color: #4c4c4c;
font-size: 20px;
}
.consult-support-figma-contact {
background: #f8f8f8;
border-radius: 16px;
padding: 48px 0 40px 0;
margin: 0 auto 48px auto;
max-width: 900px;
text-align: center;
}
.consult-support-figma-contact-list {
display: flex;
gap: 32px;
justify-content: center;
margin-bottom: 16px;
flex-wrap: wrap;
}
.consult-support-figma-contact-item {
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 4px 0 rgba(55, 65, 81, 0.08);
padding: 18px 32px;
min-width: 220px;
max-width: 320px;
flex: 1 1 220px;
display: flex;
flex-direction: column;
align-items: center;
}
.consult-support-figma-contact-label {
font-size: 18px;
font-weight: 600;
color: #102902;
margin-bottom: 6px;
}
.consult-support-figma-contact-value {
font-size: 20px;
color: #191919;
}
.consult-support-figma-contact-note {
font-size: 18px;
color: #4c4c4c;
margin-top: 18px;
}
.consult-support-figma-download-btn {
display: inline-block;
margin-top: 16px;
background: #fff;
color: #69170a;
border: 1px solid #69170a;
border-radius: 5px;
padding: 10px 20px;
font-size: 18px;
font-weight: 700;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.consult-support-figma-download-btn:hover {
background: #69170a;
color: #fff;
}
/* 상담안내 Section - Figma 기반 */
.consult-support-figma-guide-section {
padding: 80px 0 64px 0;
background: #fff;
}
.consult-support-figma-guide-title {
font-weight: 700;
font-size: 2.25rem;
line-height: 1.5;
color: #191919;
margin-bottom: 40px;
text-align: center;
letter-spacing: -0.36px;
}
.consult-support-figma-guide-row {
display: flex;
gap: 48px;
align-items: flex-start;
justify-content: center;
max-width: 1240px;
margin: 0 auto;
}
.consult-support-figma-guide-img-col {
flex: 0 0 600px;
display: flex;
align-items: center;
justify-content: center;
}
.consult-support-figma-guide-img {
width: 100%;
object-fit: cover;
border-radius: 24px;
max-width: 50%;
}
.consult-support-figma-guide-card-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;
}
@media (max-width: 1024px) {
.consult-support-figma-guide-card-row {
gap: 16px;
}
}
.consult-support-figma-guide-card {
background: #f8f8f8;
border-radius: 20px;
padding: 30px 32px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 2px 8px 0 rgba(55, 65, 81, 0.04);
height: 100%;
min-height: 180px;
}
.consult-support-figma-guide-card-title {
font-weight: 700;
font-size: 1.2rem;
color: #191919;
margin-bottom: 0;
}
.consult-support-figma-guide-card-desc {
font-weight: 400;
font-size: 1rem;
color: #4c4c4c;
line-height: 1.6;
}
@media (max-width: 1024px) {
.consult-support-figma-guide-row {
flex-direction: column;
gap: 32px;
align-items: stretch;
}
.consult-support-figma-guide-img-col {
justify-content: center;
margin-bottom: 16px;
}
.consult-support-figma-guide-img {
width: 80%;
height: auto;
margin: 0 auto;
}
.consult-support-figma-guide-card-row {
gap: 16px;
}
.consult-support-figma-guide-card {
padding: 24px 20px;
}
}
@media (max-width: 768px) {
.consult-support-figma-guide-section {
padding: 40px 0 32px 0;
}
.consult-support-figma-guide-title {
font-size: 1.3rem;
margin-bottom: 24px;
}
.consult-support-figma-guide-img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
.consult-support-figma-guide-card {
padding: 16px 10px;
border-radius: 12px;
min-height: auto;
}
.consult-support-figma-guide-card-title {
font-size: 1rem;
}
.consult-support-figma-guide-card-desc {
font-size: 0.95rem;
}
.consult-support-figma-guide-card-row {
grid-template-columns: 1fr;
}
}
/* 상담절차 Section - Figma 기반 */
.consult-support-figma-process-section {
padding: 60px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.consult-support-figma-process-title {
font-weight: 700;
font-size: 36px;
color: #191919;
text-align: center;
letter-spacing: -0.36px;
margin-bottom: 0;
}
.consult-support-figma-process-steps {
display: flex;
gap: 16px;
width: 100%;
max-width: 1240px;
justify-content: center;
}
.consult-support-figma-process-step {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 32px 24px 32px 24px;
min-width: 0;
box-sizing: border-box;
}
.consult-support-figma-process-step-num {
font-weight: 700;
font-size: 20px;
color: #3d0303;
background: #fff5dc;
border-radius: 22.5px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.consult-support-figma-process-step-title {
font-weight: 700;
font-size: 20px;
color: #191919;
text-align: center;
letter-spacing: -0.2px;
margin-bottom: 0;
}
.consult-support-figma-process-step-desc {
font-weight: 300;
font-size: 18px;
color: #4c4c4c;
text-align: left;
margin: 0;
padding-left: 0;
list-style: disc inside;
}
.consult-support-figma-process-step-desc li {
margin-left: 27px;
margin-bottom: 0.5em;
line-height: 1.5;
text-align: center;
}
.consult-support-figma-process-note {
background: #f8f8f8;
border-radius: 16px;
padding: 48px;
font-size: 20px;
color: #102902;
text-align: center;
max-width: 1240px;
width: 100%;
}
.consult-support-figma-process-note strong {
font-weight: 700;
color: #191919;
}
.consult-support-figma-process-types {
display: flex;
gap: 40px;
width: 100%;
max-width: 1240px;
justify-content: center;
}
.consult-support-figma-process-type {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 32px 24px;
min-width: 0;
box-sizing: border-box;
}
.consult-support-figma-process-type-img {
width: 400px;
height: auto;
margin-bottom: 8px;
}
@media (max-width: 768px) {
.consult-support-figma-process-type-img,
.consult-support-figma-process-type-img img {
width: 100%;
}
}
.consult-support-figma-process-type-title {
font-weight: 700;
font-size: 24px;
color: #191919;
text-align: center;
letter-spacing: -0.24px;
margin-bottom: 0;
}
.consult-support-figma-process-type-desc {
font-weight: 300;
font-size: 18px;
color: #4c4c4c;
text-align: left;
margin: 0;
padding-left: 0;
list-style: disc inside;
}
.consult-support-figma-process-type-desc li {
margin-left: 30px;
margin-bottom: 0.5em;
line-height: 1.5;
text-align: center;
}
@media (max-width: 1024px) {
.consult-support-figma-process-steps,
.consult-support-figma-process-types {
flex-direction: column;
gap: 24px;
}
}
@media (max-width: 768px) {
.consult-support-figma-process-section {
padding: 32px 0;
gap: 24px;
}
.consult-support-figma-process-title {
font-size: 1.3rem;
}
.consult-support-figma-process-step-title {
font-size: 1rem;
}
.consult-support-figma-process-step-desc {
font-size: 0.95rem;
}
.consult-support-figma-process-note {
font-size: 1rem;
padding: 24px;
}
.consult-support-figma-process-type-title {
font-size: 1rem;
}
.consult-support-figma-process-type-desc {
font-size: 0.95rem;
}
.consult-support-figma-process-type,
.consult-support-figma-process-step {
align-items: flex-start;
padding: 0;
}
.consult-support-figma-process-type-desc li,
.consult-support-figma-process-step-desc li {
margin-left: 0;
text-align: left;
}
.consult-support-figma-process-step-desc li .consult-spacing {
display: none;
}
}
/* 예약안내 Section - Figma 기반 */
.consult-support-figma-contact-section {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 20px;
}
.consult-support-figma-contact-card {
background: #f8f8f8;
border-radius: 16px;
padding: 48px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
box-sizing: border-box;
}
.consult-support-figma-contact-title {
font-weight: 700;
font-size: 28px;
color: #102902;
text-align: center;
margin-bottom: 0;
}
.consult-support-figma-contact-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
justify-content: center;
}
.consult-support-figma-contact-icon {
width: 20px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
}
.consult-support-figma-contact-icon-phone {
background-image: url('data:image/svg+xml;utf8,');
}
.consult-support-figma-contact-icon-email {
background-image: url('data:image/svg+xml;utf8,');
}
.consult-support-figma-contact-info {
font-weight: 600;
font-size: 18px;
color: #102902;
text-align: center;
}
.consult-support-figma-contact-note {
font-weight: 400;
font-size: 16px;
color: #102902;
text-align: center;
margin: 0;
}
.consult-support-figma-contact-note-danger {
color: #a50d0d;
font-weight: 500;
margin-top: 4px;
}
.consult-support-figma-download-btn {
display: inline-block;
margin-top: 8px;
padding: 10px 24px;
background: #102902;
color: #fff;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
}
.consult-support-figma-download-btn:hover {
background: #174c1b;
}
@media (max-width: 768px) {
.consult-support-figma-contact-card {
padding: 16px;
gap: 12px;
align-items: flex-start;
}
.consult-support-figma-contact-row {
align-items: flex-start;
justify-content: flex-start;
}
.consult-support-figma-contact-title {
font-size: 1.25rem;
}
.consult-support-figma-contact-info,
.consult-support-figma-contact-note {
font-size: 1rem;
text-align: left;
}
}
/* 양식 다운로드 Section - Figma 기반 */
.consult-support-figma-download-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 96px 0;
}
.consult-support-figma-download-card {
background: #f8f8f8;
border-radius: 16px;
padding: 20px 24px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
gap: 16px;
}
.consult-support-figma-download-title {
font-weight: 700;
font-size: 24px;
color: #191919;
white-space: pre;
}
.consult-support-figma-download-btn2 {
display: inline-flex;
align-items: center;
gap: 4px;
background: #fff;
border: 1.5px solid #69170a;
color: #69170a;
border-radius: 5px;
padding: 10px 20px;
font-size: 18px;
font-weight: 700;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.consult-support-figma-download-btn2:hover {
background: #69170a;
color: #fff;
}
.consult-support-figma-download-btn2:hover svg{
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(7472%) hue-rotate(294deg) brightness(110%) contrast(107%);
}
@media (max-width: 768px) {
.consult-support-figma-download-card {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 16px;
}
.consult-support-figma-download-title {
font-size: 1.2rem;
white-space: break-spaces;
word-break: auto-phrase;
}
.consult-support-figma-download-btn2 {
font-size: 1rem;
padding: 8px 12px;
}
}
/* Terms Content Section Responsive & Centered Design */
.terms-article {
text-align: center;
font-size: 18px;
line-height: 1.8;
}
.terms-article strong {
font-size: 20px;
}
@media (max-width: 768px) {
.terms-content-responsive {
padding: 0 !important;
}
.terms-article {
text-align: left;
font-size: 16px;
}
.terms-article strong {
font-size: 18px;
}
}
/*드롭다운 메뉴 이탈로 인한 가로스크롤 방지*/
ul.dropdown-menu{
right: -48px;
left: auto !important;
box-sizing: border-box;
max-width: calc(100vw - 32px);
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
}
ul.dropdown-menu .dropdown-item{
white-space: normal;
word-break: break-word;
}
@media (max-width: 1325px) {
ul.dropdown-menu{
right:0;
}
}
/*드롭다운이 있는 항목에 표시용 화살표 추가*/
.navbar-custom .nav-item.dropdown > .nav-link::after{
content: '▼';
display: inline-block;
margin-left: 8px;
margin-top: 4px;
font-size: 0.6em;
vertical-align: middle;
border: none;
transition: transform 0.22s ease;
}
/* 드롭다운이 열린 상태(.active)가 부모에 붙을 때 화살표 회전 */
.navbar-custom .nav-item.dropdown.active > .nav-link.dropdown-toggle::after,
.navbar-custom .nav-item.dropdown:hover > .nav-link.dropdown-toggle::after {
transform: rotate(180deg);
margin-top: 0;
}