/* =========================================
   Solution Pages — Shared Layout & Components
   REDESIGN: 전역 디자인 시스템(redesign.css)의 rd- 토큰에 정렬.
   기존 클래스명/마크업/SEO/JS는 그대로 두고 팔레트·타이포만 통일.
   팔레트: Pretendard(전역) + Navy #0B1B3B / Blue #1A4FD6 / Gold #D8A82A
   (이전 파랑→보라 그라데이션, 80px 초대형 타이틀 등 단독 디자인 제거)
   ========================================= */

/* Base Layout & Typography */
.solution_hero {
    position: relative;
    padding: 96px 0 84px;
    background: var(--rd-navy-2, #12274F);
    color: #fff;
    overflow: hidden;
    text-align: center;
}
.solution_hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 75% 100% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 75% 100% at 50% 0%, #000 30%, transparent 75%);
    opacity: 1; pointer-events: none;
}
.hero_badge {
    position: relative;
    display: inline-block; padding: 8px 18px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: 100px; color: #BFD0F0; font-size: 13px; font-weight: 600;
    margin-bottom: 24px; letter-spacing: 0.08em; text-transform: uppercase;
}
.hero_title {
    position: relative;
    font-size: clamp(30px, 4.4vw, 50px); font-weight: 800; margin-bottom: 20px; line-height: 1.14;
    letter-spacing: -0.03em; word-break: keep-all;
}
.hero_desc {
    position: relative;
    font-size: clamp(16px, 1.7vw, 19px); font-weight: 400; color: #AEBED8;
    max-width: 720px; margin: 0 auto 36px; line-height: 1.6; word-break: keep-all;
}
.hero_btn_wrap { position: relative; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Back to hub link */
.sol_back {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 22px; padding: 9px 18px;
    color: #C8D6EF; text-decoration: none;
    font-size: 14px; font-weight: 600;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}
.sol_back:hover { background: rgba(255,255,255,0.14); color: #fff; transform: translateX(-3px); }

.btn_primary {
    background: var(--rd-blue, #1A4FD6); color: #fff !important; padding: 16px 34px;
    border-radius: 11px; font-weight: 700; font-size: 16px;
    transition: all 0.25s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 0 12px 30px -14px rgba(26,79,214,.5);
}
.btn_primary:hover { background: var(--rd-blue-bright, #2E63E8); color: #fff !important; transform: translateY(-3px); box-shadow: 0 16px 38px -14px rgba(26,79,214,.55); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.section_title_center { text-align: center; margin-bottom: 56px; max-width: 720px; margin-left: auto; margin-right: auto; }
.section_title_center h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; color: var(--rd-navy, #0B1B3B); margin-bottom: 16px; letter-spacing: -0.03em; word-break: keep-all; }
.section_title_center p { font-size: 17px; font-weight: 400; color: var(--rd-muted, #5B6B82); line-height: 1.6; word-break: keep-all; }

/* Visible Breadcrumb */
.sol_breadcrumb {
    max-width: 1280px; margin: 0 auto; padding: 18px 40px;
    font-size: 13.5px; color: var(--rd-muted, #5B6B82);
}
.sol_breadcrumb a { color: var(--rd-muted, #5B6B82); text-decoration: none; }
.sol_breadcrumb a:hover { color: var(--rd-blue, #1A4FD6); }
.sol_breadcrumb .sep { margin: 0 8px; color: #C7D0DC; }
.sol_breadcrumb [aria-current="page"] { color: var(--rd-navy, #0B1B3B); font-weight: 600; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

/* Website & General Specifics */
.showcase_section { padding: 104px 0; background: #fff; }
.showcase_wrap { display: flex; align-items: center; gap: 64px; }
.showcase_img {
    flex: 1.2; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 60px -24px rgba(11,27,59,.25); background: #fff; position: relative;
    transition: transform 0.35s ease; border: 1px solid var(--rd-border, #EAEEF4);
}
.showcase_img:hover { transform: translateY(-8px); }
.showcase_img img { width: 100%; height: auto; display: block; }
.showcase_info { flex: 0.8; }
.sc_badge { color: var(--rd-blue, #1A4FD6); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 14px; display: block; text-transform: uppercase; font-size: 13px; }
.sc_title { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: var(--rd-navy, #0B1B3B); margin-bottom: 22px; line-height: 1.22; letter-spacing: -0.03em; word-break: keep-all; }
.sc_desc { font-size: 17px; font-weight: 400; color: var(--rd-muted, #5B6B82); margin-bottom: 32px; line-height: 1.7; word-break: keep-all; }
.sc_features { list-style: none; padding: 0; margin: 32px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc_features li { display: flex; align-items: center; gap: 10px; color: var(--rd-text, #3A4759); font-weight: 500; font-size: 15.5px; }
.sc_features li i { color: var(--rd-blue, #1A4FD6); font-size: 18px; }

/* Feature Tabs */
.features_section { padding: 104px 0; background: var(--rd-surface, #F6F8FB); }
.feature_tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 48px; flex-wrap: wrap; }
.tab_btn {
    padding: 13px 28px; border-radius: 100px; background: #fff;
    color: var(--rd-muted, #5B6B82); font-weight: 700; cursor: pointer; border: 1px solid var(--rd-border, #EAEEF4); font-size: 15.5px;
    transition: all 0.25s ease;
}
.tab_btn.active, .tab_btn:hover { background: var(--rd-blue, #1A4FD6); color: #fff; border-color: var(--rd-blue, #1A4FD6); transform: translateY(-3px); box-shadow: 0 12px 26px -12px rgba(26,79,214,.4); }
.tab_content { display: none; }
.tab_content.active { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; animation: fadeInUp 0.5s ease; }
.feature_card { background: #fff; border: 1px solid var(--rd-border, #EAEEF4); border-radius: 18px; padding: 34px; transition: all 0.3s ease; box-shadow: 0 10px 30px -22px rgba(11,27,59,.2); }
.feature_card:hover { border-color: #D7E2F7; box-shadow: 0 24px 50px -24px rgba(11,27,59,.25); transform: translateY(-6px); }
.fc_header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.fc_icon { width: 54px; height: 54px; background: var(--rd-blue-soft, #EAF1FF); color: var(--rd-blue, #1A4FD6); border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.fc_title { font-size: 21px; font-weight: 700; color: var(--rd-navy, #0B1B3B); margin: 0; letter-spacing: -0.02em; }
.fc_list { list-style: none; padding: 0; margin: 0; }
.fc_list li { margin-bottom: 13px; color: var(--rd-muted, #5B6B82); font-size: 15.5px; line-height: 1.6; position: relative; padding-left: 22px; font-weight: 400; }
.fc_list li::before { content: '→'; color: var(--rd-blue, #1A4FD6); position: absolute; left: 0; font-weight: 700; }

/* Admin Section */
.admin_section { padding: 104px 0; background: var(--rd-navy, #0B1B3B); color: #fff; position: relative; }
.admin_grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; }
.admin_info span.sc_badge { color: var(--rd-gold, #D8A82A); }
.admin_info h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; margin-bottom: 24px; letter-spacing: -0.03em; }
.admin_info p { font-size: 17px; font-weight: 400; color: #AEBED8; margin-bottom: 40px; line-height: 1.7; }
.admin_features_list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.af_item h3, .af_item h4 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #fff; display: flex; align-items: center; gap: 10px; }
.af_item h3 i, .af_item h4 i { color: var(--rd-gold, #D8A82A); }
.af_item p { font-size: 15px; font-weight: 400; margin: 0; color: #9FB0CC; }

/* Translation Tab Specifics */
.trans_comparison { padding: 96px 0; background: var(--rd-surface, #F6F8FB); }
.comparison_box {
    display: flex; gap: 0; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 50px -24px rgba(11,27,59,.25); margin-top: 44px;
}
.comp_col { flex: 1; padding: 56px 40px; }
.comp_col.traditional { background: #fff; color: var(--rd-muted, #5B6B82); }
.comp_col.hcat { background: var(--rd-navy, #0B1B3B); color: #fff; position: relative; }
.comp_col.hcat::before {
    content: 'RECOMMENDED'; position: absolute; top: 0; right: 0;
    background: var(--rd-blue, #1A4FD6); color: #fff; padding: 5px 14px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; border-bottom-left-radius: 10px;
}
.comp_title { font-size: 22px; font-weight: 800; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; }
.comp_list { list-style: none; padding: 0; margin: 0; }
.comp_list li { margin-bottom: 18px; font-size: 16px; display: flex; align-items: flex-start; gap: 13px; line-height: 1.5; }

.trans_features { padding: 96px 0; background: #fff; }
.features_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature_card_new {
    background: #fff; border-radius: 18px;
    text-align: center; transition: all 0.3s ease;
    border: 1px solid var(--rd-border, #EAEEF4); overflow: hidden; box-shadow: 0 10px 30px -22px rgba(11,27,59,.2);
}
.feature_card_new:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(11,27,59,.25); border-color: #D7E2F7; }
.feature_img_box { width: 100%; height: 280px; overflow: hidden; background: #f1f5f9; }
.feature_img_box img { width: 100%; height: 100% !important; object-fit: cover !important; object-position: top center; border-radius: 0 !important; margin: 0 !important; }
.feature_card_content { padding: 34px 30px; text-align: left; }
.feature_card_content h3, .feature_card_content h4 { font-size: 21px; font-weight: 700; color: var(--rd-navy, #0B1B3B); margin-bottom: 13px; letter-spacing: -0.02em; }
.feature_card_content p { font-size: 15.5px; color: var(--rd-muted, #5B6B82); line-height: 1.7; word-break: keep-all; }

.specialty_section { padding: 104px 0; background: #fff; }
.flow_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.flow_item {
    text-align: center; padding: 44px 28px; background: #fff; border-radius: 18px;
    box-shadow: 0 10px 30px -22px rgba(11,27,59,.2); border: 1px solid var(--rd-border, #EAEEF4);
    transition: all 0.3s ease;
}
.flow_item:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -24px rgba(11,27,59,.25); border-color: #D7E2F7; }
.flow_icon {
    width: 72px; height: 72px; background: var(--rd-blue, #1A4FD6);
    color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin: 0 auto 26px; box-shadow: 0 12px 24px -10px rgba(26,79,214,.45);
}
.flow_title { font-size: 20px; font-weight: 700; color: var(--rd-navy, #0B1B3B); margin-bottom: 13px; letter-spacing: -0.02em; }
.flow_desc { font-size: 15px; font-weight: 400; color: var(--rd-muted, #5B6B82); line-height: 1.6; word-break: keep-all; }

.btm_cta_section { text-align: center; color: #fff; padding: 88px 40px; margin-top: 88px; border-radius: 28px; position: relative; overflow: hidden; background: var(--rd-navy, #0B1B3B); }
.btm_cta_section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 80% 100% at 100% 50%, #000, transparent 70%); mask-image: radial-gradient(ellipse 80% 100% at 100% 50%, #000, transparent 70%); opacity: 1; }
.btm_cta_section.website { background: var(--rd-navy, #0B1B3B); }
.btm_cta_section.translation { background: var(--rd-navy, #0B1B3B); }
.btm_cta_section.eregi { background: var(--rd-navy, #0B1B3B); }
.btm_cta_section h2, .btm_cta_section h3 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; margin-bottom: 20px; position: relative; z-index: 1; letter-spacing: -0.03em; word-break: keep-all; }
.btm_cta_section p { font-size: 18px; font-weight: 400; color: #AEBED8; margin-bottom: 36px; position: relative; z-index: 1; }
.btn-cta {
    display: inline-block; background: var(--rd-gold, #D8A82A); color: var(--rd-navy, #0B1B3B) !important; font-weight: 800;
    padding: 17px 44px; border-radius: 12px; text-decoration: none;
    transition: all 0.25s ease; box-shadow: 0 14px 34px -16px rgba(216,168,42,.6);
    font-size: 17px; position: relative; z-index: 1;
}
.btn-cta:hover { transform: translateY(-3px); background: var(--rd-gold-2, #E8BC45); color: var(--rd-navy, #0B1B3B) !important; box-shadow: 0 18px 40px -16px rgba(216,168,42,.7); }
.btm_cta_section.website .btn-cta { color: var(--rd-navy, #0B1B3B) !important; }
.btm_cta_section.translation .btn-cta { color: var(--rd-navy, #0B1B3B) !important; }
.btm_cta_section.eregi .btn-cta { color: var(--rd-navy, #0B1B3B) !important; }

/* e-Regi Custom Elements */
.eregi_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.eregi_img_box { border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px -20px rgba(11,27,59,.25); background: var(--rd-surface, #F6F8FB); border: 1px solid var(--rd-border, #EAEEF4); }
.eregi_img_box img { width: 100%; display: block; }
.list_checked { list-style: none; padding: 0; }
.list_checked li { position: relative; padding-left: 28px; margin-bottom: 14px; font-size: 16px; color: var(--rd-text, #3A4759); line-height: 1.6; }
.list_checked li::before { content: '\f058'; font-family: 'FontAwesome'; position: absolute; left: 0; top: 2px; color: var(--rd-blue, #1A4FD6); font-size: 18px; }
.eregi_inner_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Solution hub (overview) cards */
.sol_hub_intro { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sol_hub_intro h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: var(--rd-navy, #0B1B3B); letter-spacing: -0.03em; margin-bottom: 16px; }
.sol_hub_intro p { font-size: 17px; color: var(--rd-muted, #5B6B82); line-height: 1.7; word-break: keep-all; }
.sol_hub_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.sol_hub_card {
    display: block; text-decoration: none; background: #fff; border: 1px solid var(--rd-border, #EAEEF4);
    border-radius: 18px; padding: 40px 36px; transition: all 0.3s ease;
    box-shadow: 0 10px 30px -22px rgba(11,27,59,.2);
}
.sol_hub_card:hover { transform: translateY(-6px); border-color: #D7E2F7; box-shadow: 0 24px 50px -24px rgba(11,27,59,.25); }
.sol_hub_card .hub_icon { width: 60px; height: 60px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: var(--rd-blue, #1A4FD6); margin-bottom: 22px; }
.sol_hub_card h2 { font-size: 23px; font-weight: 800; color: var(--rd-navy, #0B1B3B); margin: 0 0 13px; letter-spacing: -0.02em; }
.sol_hub_card p { font-size: 15.5px; color: var(--rd-muted, #5B6B82); line-height: 1.7; margin: 0 0 18px; word-break: keep-all; }
.sol_hub_card .hub_more { color: var(--rd-blue, #1A4FD6); font-weight: 700; font-size: 15px; }

/* 태블릿 */
@media (max-width: 1024px) {
    .container { padding: 0 20px; }
    .sol_breadcrumb { padding: 16px 20px; }
    .solution_hero { padding: 72px 0 60px; }
    .showcase_wrap, .admin_grid { flex-direction: column; text-align: center; gap: 36px; }
    .admin_grid { grid-template-columns: 1fr; }
    .eregi_grid { grid-template-columns: 1fr; text-align: center; gap: 36px; }
    .eregi_inner_grid { grid-template-columns: 1fr; gap: 22px; max-width: 500px; margin: 0 auto; }
    .showcase_info, .admin_info { margin-bottom: 24px; text-align: left; }
    .sc_features { text-align: left; }
    .list_checked { text-align: left; }
    .features_section, .showcase_section, .specialty_section, .trans_comparison, .trans_features, .admin_section { padding: 72px 0; }
    .flow_grid { grid-template-columns: repeat(2, 1fr); }
    .sol_hub_grid { grid-template-columns: 1fr; }
    .showcase_img { max-width: 100%; width: 100%; margin: 0 auto; }
    .showcase_img img { width: 100%; height: auto; border-radius: 12px; }
}

/* 모바일 */
@media (max-width: 768px) {
    .solution_hero { padding: 56px 0 48px; }
    .hero_btn_wrap { flex-wrap: wrap; }
    .section_title_center { margin-bottom: 40px; }
    .sc_features { grid-template-columns: 1fr; }
    .feature_card { padding: 28px 24px; }
    .comparison_box { flex-direction: column; }
    .comp_col { padding: 40px 26px; }
    .features_grid, .flow_grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .feature_img_box { height: auto; min-height: 200px; }
    .feature_img_box img { height: auto !important; position: static !important; }
    .admin_features_list { grid-template-columns: 1fr; }
    .eregi_inner_grid { max-width: 100%; }
    .btm_cta_section { padding: 56px 24px; margin-top: 56px; border-radius: 22px; }
    .sol_hub_card { padding: 30px 26px; }
}

/* 소형 모바일 */
@media (max-width: 400px) {
    .container { padding: 0 16px; }
    .btn_primary, .btn-cta { width: 100%; justify-content: center; text-align: center; }
}