/* =================================================================
   Digital Studio · Shared Landing Components
   - 모든 digital 서브 페이지가 공통으로 사용
   - default/style.css 의 ddf_* 패턴을 base로 분리
   - 1023 / 767 / 480 반응형
   ================================================================= */

:root {
    --ddf-dark: #0a0e2e;
    --ddf-dark-2: #111633;
    --ddf-accent: #5b6cff;
    --ddf-accent-lt: #8a9aff;
    --ddf-accent-dp: #2a3ab8;
    --ddf-pink: #ff5e7e;
    --ddf-amber: #ffae00;
    --ddf-green: #10c98a;
    --ddf-purple: #a675ff;
    --ddf-cyan: #00bcd4;
    --ddf-bg: #f7f8fa;
    --ddf-text: #1a1f3a;
    --ddf-text-sub: #5e6580;
    --ddf-border: #e6e8f0;
    --ddf-card-shadow: 0 4px 20px -8px rgba(10, 14, 46, 0.08);
    --ddf-card-shadow-hover: 0 20px 48px -16px rgba(10, 14, 46, 0.18);
    --ddf-radius: 20px;
    --ddf-radius-sm: 14px;
}

/* ========== 글로벌 한국어 자연 개행 ========== */
.digital_main {
    color: var(--ddf-text);
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
}

.digital_main .font_g,
.digital_main .ddf_eyebrow,
.digital_main .tdh_eyebrow,
.digital_main .trl_en,
.digital_main .crl_en,
.digital_main .tc_en,
.digital_main .ceo_en,
.digital_main .cc_org,
.digital_main .lsg_refs,
.digital_main .contact_tags {
    word-break: normal;
    overflow-wrap: normal;
}

/* ========== 섹션 wrapper ========== */
.ddf_sect_wrap {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding-top: 64px;
    padding-bottom: 120px;
}

.ddf_sect {
    position: relative;
}

/* ========== 섹션 head ========== */
.ddf_sect_head {
    margin-bottom: 56px;
}

.ddf_sect_head.center {
    text-align: center;
}

.ddf_eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(91, 108, 255, 0.08);
    border: 1px solid rgba(91, 108, 255, 0.2);
    border-radius: 100px;
    color: var(--ddf-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    margin-bottom: 18px;
}

.ddf_eyebrow.dark {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

.ddf_title {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ddf-text);
}

.ddf_title.sm {
    font-size: 28px;
}

.ddf_desc {
    font-size: 16px;
    color: var(--ddf-text-sub);
    line-height: 1.7;
    margin-top: 18px;
    max-width: 680px;
}

.ddf_sect_head.center .ddf_desc {
    margin-left: auto;
    margin-right: auto;
}

.em_grad {
    background: linear-gradient(135deg, #5b6cff 0%, #8a9aff 50%, #c8a4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.em_grad_w {
    background: linear-gradient(135deg, #8a9aff 0%, #c8a4ff 50%, #ff9ec8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.em_underline {
    background: linear-gradient(180deg, transparent 60%, rgba(91, 108, 255, 0.25) 60%);
    padding: 0 4px;
}

/* head_split: 좌측 제목 / 우측 더보기 */
.head_split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.ddf_more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 100px;
    background: #fff;
    border: 1px solid var(--ddf-border);
    color: var(--ddf-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
    flex-shrink: 0;
    white-space: nowrap;
}

.ddf_more .arrow {
    transition: transform 0.25s;
}

.ddf_more:hover {
    background: var(--ddf-dark);
    color: #fff;
    border-color: var(--ddf-dark);
    transform: translateY(-2px);
}

.ddf_more:hover .arrow {
    transform: translateX(4px);
}

/* PC only break helper */
.br_mo { display: none; }

/* ========== 공감 후크 (체크 6) ========== */
.empathy_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.empathy_list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid var(--ddf-border);
    border-radius: var(--ddf-radius-sm);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.empathy_list li:hover,
.empathy_list li.checked {
    transform: translateY(-3px);
    box-shadow: var(--ddf-card-shadow-hover);
    border-color: transparent;
}

.ep_check {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ep_check i {
    position: absolute;
    font-size: 28px;
    transition: opacity 0.35s, transform 0.35s;
}

.ep_check .off {
    color: #d4d8e6;
    opacity: 1;
}

.ep_check .on {
    color: var(--ddf-accent);
    opacity: 0;
    transform: scale(0.6);
}

.empathy_list li:hover .ep_check .off,
.empathy_list li.checked .ep_check .off {
    opacity: 0;
}

.empathy_list li:hover .ep_check .on,
.empathy_list li.checked .ep_check .on {
    opacity: 1;
    transform: scale(1);
}

.empathy_list li p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ddf-text);
    font-weight: 500;
}

.empathy_list li p strong {
    color: var(--ddf-accent);
    font-weight: 800;
}

.empathy_tail {
    margin-top: 48px;
    text-align: center;
}

.empathy_tail .arrow_down {
    display: inline-block;
    font-size: 28px;
    color: var(--ddf-accent);
    margin-bottom: 8px;
    animation: ddfBounce 1.8s ease-in-out infinite;
}

.empathy_tail p {
    font-size: 18px;
    font-weight: 700;
    color: var(--ddf-text);
}

@keyframes ddfBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

@keyframes ddfPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

/* ========== 비교표 ========== */
.compare_table_wrap {
    background: #fff;
    border: 1px solid var(--ddf-border);
    border-radius: var(--ddf-radius);
    overflow: hidden;
    box-shadow: var(--ddf-card-shadow);
}

.compare_table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.compare_table thead th {
    padding: 22px 16px;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    background: #f1f3f9;
    color: var(--ddf-text-sub);
    border-bottom: 1px solid var(--ddf-border);
}

.compare_table thead th.col_label {
    background: #fff;
    width: 22%;
}

.compare_table thead th.col_edk {
    background: var(--ddf-dark);
    color: #fff;
    border-left: 1px solid var(--ddf-dark);
    border-right: 1px solid var(--ddf-dark);
}

.compare_table thead th.col_edk .edk_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
}

.compare_table thead th.col_edk .edk_badge img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.compare_table tbody td {
    padding: 20px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--ddf-border);
    vertical-align: middle;
}

.compare_table tbody tr:last-child td {
    border-bottom: none;
}

.compare_table td.col_label {
    font-weight: 700;
    color: var(--ddf-text);
    background: #fafbfd;
    text-align: left;
    padding-left: 28px;
}

.compare_table td.col_freelance,
.compare_table td.col_vendor {
    text-align: center;
    color: #8890a8;
}

.compare_table td.col_edk {
    text-align: center;
    background: linear-gradient(180deg, rgba(91, 108, 255, 0.08), rgba(91, 108, 255, 0.03));
    color: var(--ddf-text);
    font-weight: 600;
    border-left: 1px solid rgba(91, 108, 255, 0.18);
    border-right: 1px solid rgba(91, 108, 255, 0.18);
    box-shadow: 0 0 0 1px rgba(91, 108, 255, 0.06) inset;
}

.compare_table td.col_edk strong {
    color: var(--ddf-accent-dp);
    font-weight: 800;
}

.compare_table .ic_o,
.compare_table .ic_x,
.compare_table .ic_tilde {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
    margin-right: 8px;
    vertical-align: middle;
}

.compare_table .ic_o {
    background: rgba(91, 108, 255, 0.15);
    color: var(--ddf-accent-dp);
}

.compare_table .ic_x {
    background: rgba(255, 94, 126, 0.12);
    color: #d64560;
}

.compare_table .ic_tilde {
    background: rgba(136, 144, 168, 0.15);
    color: #8890a8;
}

.compare_table .txt {
    display: inline-block;
    vertical-align: middle;
}

/* ========== FAQ 아코디언 ========== */
.faq_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq_list .faq_item.faq_more {
    display: none;
}

.faq_list.expanded .faq_item.faq_more {
    display: block;
}

.faq_item {
    background: #fff;
    border: 1px solid var(--ddf-border);
    border-radius: var(--ddf-radius-sm);
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.faq_item.active {
    border-color: rgba(91, 108, 255, 0.35);
    box-shadow: var(--ddf-card-shadow);
}

.faq_q {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 24px 28px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.q_mark {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(91, 108, 255, 0.1);
    color: var(--ddf-accent);
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.q_text {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--ddf-text);
    line-height: 1.5;
}

.q_toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f3f9;
    color: var(--ddf-text-sub);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.25s, color 0.25s, transform 0.25s;
}

.faq_item.active .q_toggle {
    background: var(--ddf-accent);
    color: #fff;
    transform: rotate(45deg);
}

.faq_a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq_item.active .faq_a {
    max-height: 700px;
    padding: 0 28px 26px 76px;
}

.faq_a p {
    font-size: 15px;
    color: var(--ddf-text-sub);
    line-height: 1.75;
}

.faq_a strong {
    color: var(--ddf-accent-dp);
    font-weight: 800;
}

.faq_more_wrap {
    margin-top: 28px;
    text-align: center;
}

.faq_more_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #fff;
    border: 1px solid var(--ddf-border);
    border-radius: 100px;
    color: var(--ddf-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.faq_more_btn:hover {
    background: var(--ddf-dark);
    color: #fff;
    border-color: var(--ddf-dark);
    transform: translateY(-2px);
}

.faq_more_btn i {
    transition: transform 0.3s;
}

.faq_list.expanded + .faq_more_wrap .faq_more_btn i {
    transform: rotate(180deg);
}

.faq_more_btn .txt_open { display: none; }
.faq_list.expanded + .faq_more_wrap .faq_more_btn .txt_default { display: none; }
.faq_list.expanded + .faq_more_wrap .faq_more_btn .txt_open { display: inline; }

/* ========== 최종 CTA 다크 박스 ========== */
.ddf_final_cta {
    padding: 0;
}

.fcta_box {
    position: relative;
    padding: 80px 60px;
    background: var(--ddf-dark);
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

.fcta_pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%);
    pointer-events: none;
    z-index: 0;
}

.fcta_glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.fcta_glow.fg_1 {
    top: -30%;
    left: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(91, 108, 255, 0.4), transparent 70%);
}

.fcta_glow.fg_2 {
    bottom: -30%;
    right: -10%;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(166, 117, 255, 0.32), transparent 70%);
}

.fcta_inner {
    position: relative;
    z-index: 1;
}

.fcta_text {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.fcta_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 22px;
    backdrop-filter: blur(8px);
}

.fe_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ddf-accent-lt);
    box-shadow: 0 0 10px var(--ddf-accent-lt);
    animation: ddfPulse 1.8s ease-in-out infinite;
}

.fcta_title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 22px;
}

.fcta_desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    margin-bottom: 36px;
}

.fcta_btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.fcta_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}

.fcta_btn i {
    font-size: 18px;
}

.fcta_btn.primary {
    background: #fff;
    color: var(--ddf-dark);
    box-shadow: 0 14px 36px -12px rgba(255, 255, 255, 0.5);
}

.fcta_btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px -12px rgba(255, 255, 255, 0.7);
}

.fcta_btn.primary .arrow {
    transition: transform 0.25s;
}

.fcta_btn.primary:hover .arrow {
    transform: translateX(4px);
}

.fcta_btn.ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
}

.fcta_btn.ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-3px);
}

.fcta_info {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fcta_info li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.fcta_info li i {
    color: var(--ddf-accent-lt);
    font-size: 15px;
}

/* ========== 작은 다크 강조 박스 ========== */
.dark_box {
    position: relative;
    padding: 60px 50px;
    background: var(--ddf-dark);
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

.dark_box .db_pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%);
    pointer-events: none;
    z-index: 0;
}

.dark_box .db_glow {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 108, 255, 0.4), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.dark_box .db_inner {
    position: relative;
    z-index: 1;
}

/* ========== 공통 카드 ========== */
.ddf_card {
    background: #fff;
    border: 1px solid var(--ddf-border);
    border-radius: var(--ddf-radius);
    box-shadow: var(--ddf-card-shadow);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.ddf_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ddf-card-shadow-hover);
    border-color: transparent;
}

/* ========== 반응형 — 1023px ========== */
@media screen and (max-width: 1023px) {
    .ddf_sect_wrap {
        gap: 90px;
        padding-top: 48px;
        padding-bottom: 90px;
    }

    .ddf_sect_head {
        margin-bottom: 40px;
    }

    .ddf_title { font-size: 34px; }
    .ddf_title.sm { font-size: 24px; }
    .ddf_desc { font-size: 15px; }

    .empathy_list li { padding: 20px 22px; }
    .empathy_list li p { font-size: 15px; }

    .compare_table thead th,
    .compare_table tbody td {
        padding: 16px 10px;
        font-size: 13px;
    }
    .compare_table td.col_label { padding-left: 18px; }
    .compare_table .ic_o,
    .compare_table .ic_x,
    .compare_table .ic_tilde {
        width: 22px;
        height: 22px;
        font-size: 12px;
        margin-right: 6px;
    }

    .faq_q { padding: 20px 22px; }
    .q_text { font-size: 15px; }
    .faq_item.active .faq_a { padding: 0 22px 22px 70px; }

    .fcta_box {
        padding: 64px 36px;
        border-radius: 24px;
        margin: 0 16px;
    }
    .fcta_title { font-size: 32px; }
    .fcta_desc { font-size: 15px; }

    .dark_box { padding: 48px 36px; border-radius: 22px; }
}

/* ========== 반응형 — 767px ========== */
@media screen and (max-width: 767px) {
    .ddf_sect_wrap {
        gap: 72px;
        padding-top: 32px;
        padding-bottom: 72px;
    }

    .ddf_sect_head {
        margin-bottom: 32px;
    }

    .ddf_title { font-size: 26px; }
    .ddf_title.sm { font-size: 20px; }
    .ddf_desc { font-size: 14px; margin-top: 14px; }
    .ddf_eyebrow { font-size: 10px; padding: 5px 12px; margin-bottom: 14px; }

    .br_mo { display: block; }

    .head_split {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .ddf_more {
        font-size: 13px;
        padding: 11px 20px;
    }

    /* 공감 후크 */
    .empathy_list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .empathy_list li {
        padding: 18px 20px;
        gap: 14px;
    }
    .empathy_list li p { font-size: 14px; }
    .ep_check { width: 24px; height: 24px; }
    .ep_check i { font-size: 24px; }
    .empathy_tail { margin-top: 32px; }
    .empathy_tail p { font-size: 16px; }

    /* 비교표 가로 스크롤 + 라벨 sticky */
    .compare_table_wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .compare_table { min-width: 540px; table-layout: auto; }
    .compare_table thead th,
    .compare_table tbody td {
        padding: 12px 8px;
        font-size: 12px;
    }
    .compare_table thead th.col_label,
    .compare_table td.col_label {
        position: sticky;
        left: 0;
        z-index: 2;
        padding-left: 14px;
        padding-right: 10px;
        min-width: 100px;
        box-shadow: 1px 0 0 var(--ddf-border);
    }
    .compare_table thead th.col_edk,
    .compare_table td.col_edk {
        min-width: 110px;
    }
    .compare_table thead th.col_freelance,
    .compare_table thead th.col_vendor,
    .compare_table td.col_freelance,
    .compare_table td.col_vendor {
        min-width: 100px;
    }

    /* FAQ */
    .faq_q {
        padding: 18px 18px;
        gap: 12px;
    }
    .q_mark { width: 28px; height: 28px; font-size: 13px; }
    .q_text { font-size: 14px; }
    .q_toggle { width: 28px; height: 28px; font-size: 16px; }
    .faq_item.active .faq_a { padding: 0 18px 20px 58px; }
    .faq_a p { font-size: 13px; }

    /* Final CTA */
    .fcta_box {
        padding: 48px 24px;
        margin: 0 12px;
        border-radius: 20px;
    }
    .fcta_title { font-size: 24px; margin-bottom: 16px; }
    .fcta_desc { font-size: 14px; margin-bottom: 28px; }
    .fcta_btns {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 28px;
    }
    .fcta_btn {
        width: 100%;
        justify-content: center;
        padding: 15px 24px;
        font-size: 14px;
    }
    .fcta_info {
        flex-direction: column;
        gap: 10px;
        padding-top: 24px;
    }

    .dark_box { padding: 36px 22px; border-radius: 18px; }
}

@media screen and (max-width: 480px) {
    .ddf_title { font-size: 22px; }
    .fcta_title { font-size: 22px; }
    .ddf_sect_wrap { gap: 60px; }
}

/* ========== 페이지 본문 라이트 그레이 ========== */
body:has(.digital_main) {
    background: var(--ddf-bg);
}