@charset "utf-8";

/*
 * Connect Design System Override for Doctor Web
 * Applies Connect/Journal design tokens on top of Bootstrap + commons2.css
 * Brand: #00D2C2 (Connect teal) replaces #02aed5 (old Doctor Web blue)
 * Font: Pretendard replaces Nanum Gothic
 *
 * Load order: bootstrap.css → commons2.css → styles_v3.css → connect_override.css
 */

/* ===== 1. Design Tokens ===== */
:root {
    --cnt-brand: #00D2C2;
    --app-brand: #02AED5;
    --app-brand-dark: #029ABD;
    --app-brand-gradient: linear-gradient(135deg, #02AED5, #029ABD);
    --cnt-brand-dark: #00B8AA;
    --cnt-brand-gradient: linear-gradient(135deg, #00D2C2, #00B8AA);
    --cnt-bg: #f9f9f9;
    --cnt-card-bg: #fff;
    --cnt-text: #333;
    --cnt-text-sub: #888;
    --cnt-border: #e8e8e8;
    --cnt-radius: 12px;
    --cnt-radius-sm: 8px;
    --cnt-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --cnt-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.10);
    --cnt-transition: 0.2s ease;
}

/* ===== 2. Typography — Pretendard ===== */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
}
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                 system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Nanum Gothic', sans-serif;
    color: var(--cnt-text);
    background: var(--cnt-bg);
}

/* ===== 3. Header Override ===== */
.header-wrap {
    background: #fff;
    border-bottom: 1px solid var(--cnt-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.innerHeader {
    height: 60px;
    align-items: center;
}

.innerHeader .logo {
    margin-top: 0;
    display: flex;
    align-items: center;
    height: auto;
}

.innerHeader .logo img {
    height: 32px;
    width: auto;
}

/* Nav items — teal brand color */
.gnb > li {
    margin-top: 0;
    margin-left: 32px;
    line-height: 60px;
    color: var(--app-brand);
}

.gnb > li > a {
    font-size: 14px;
    font-weight: 500;
    color: var(--cnt-text);
    background: transparent;
    transition: color var(--cnt-transition);
    position: relative;
}

.gnb > li > a:hover {
    color: var(--app-brand);
}

/* Connect 링크만 teal */
.gnb > li > a[href*="connect.php"]:hover {
    color: var(--cnt-brand);
}

.gnb > li.last {
    color: var(--cnt-text-sub);
}

.gnb > li.last > a {
    color: var(--cnt-text-sub);
}

/* Dropdown submenu */
.gnb ul.inner {
    border-radius: var(--cnt-radius-sm);
    box-shadow: var(--cnt-shadow-lg);
    border: 1px solid var(--cnt-border);
    padding: 8px 0;
    min-width: 140px;
}

.gnb ul.inner li a {
    font-size: 13px;
    padding: 8px 16px;
    line-height: 1.5;
    transition: all var(--cnt-transition);
}

.gnb ul.inner li a:hover,
.gnb ul.inner li a:focus {
    background: var(--app-brand);
    color: #fff;
}

/* ===== 4. Footer Override ===== */
.footer-wrap {
    background: #fff;
    border-top: 1px solid var(--cnt-border);
    padding: 24px 0 16px;
}

.footer-link li > a {
    font-size: 15px;
    color: var(--cnt-text);
    font-weight: 600;
    transition: color var(--cnt-transition);
}

.footer-link li > a:hover {
    color: var(--app-brand);
}

.footer-address p {
    color: var(--cnt-text-sub);
    font-size: 13px;
}

.footer-address .copyright {
    color: #aaa;
    font-size: 12px;
}

ul.footer-menu-list > li > a {
    color: var(--cnt-text-sub);
    transition: color var(--cnt-transition);
}

ul.footer-menu-list > li > a:hover {
    color: var(--app-brand);
}

.footer-sns h6 {
    color: var(--cnt-text);
    font-weight: 600;
}

/* ===== 5. Brand Color Override — Buttons ===== */
.btn-active {
    background-color: var(--app-brand);
    border-radius: var(--cnt-radius-sm);
    font-weight: 500;
    transition: opacity var(--cnt-transition), box-shadow var(--cnt-transition);
}

.btn-active:hover {
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(2, 174, 213, 0.25);
}

.btn-nonactive {
    border-color: var(--app-brand);
    color: var(--app-brand);
    border-radius: var(--cnt-radius-sm);
}

/* ===== 6. Brand Color Override — Text & Accents (Doctor Web blue) ===== */
.home-main .profile .right p.name,
.home-main .income p,
.home-main .second .info h6,
.myinfo-main h5,
.myinfo-fee p,
.consult-detail-box h6,
.consult-complete .txt-complete,
.consult-accept .txt-accepted,
.consult-accept-box h3,
.consult-accept-box p.info,
.schedule-main h5,
.join-main-box h2,
.q-answer,
.request-status li.text {
    color: var(--app-brand);
}

/* ===== 7. Brand Color Override — Borders & Backgrounds ===== */
.login h3,
.login .explain {
    color: var(--app-brand);
}

.login-form-box {
    border-color: var(--app-brand);
    border-radius: var(--cnt-radius);
}

.login-form-box input {
    border-color: var(--cnt-border);
    border-radius: var(--cnt-radius-sm);
}

.login-form-box input:focus {
    border-color: var(--app-brand);
    outline: none;
}

.login-form-box input#submit {
    background: var(--app-brand-gradient);
    border-radius: var(--cnt-radius-sm);
    font-family: inherit;
    border: none;
}

.login-form-box .join > a {
    color: var(--app-brand);
    border-bottom-color: var(--app-brand);
}

.income-date {
    border-color: var(--app-brand);
}

.income-date .date-list p,
.income-earn p {
    color: var(--app-brand);
    border-bottom-color: var(--app-brand);
}

.income-date .date-list li input[type="submit"] {
    background-color: var(--app-brand);
}

.p_modify {
    color: var(--app-brand);
    border-bottom-color: var(--app-brand);
}

.consult-search {
    border-color: var(--app-brand);
}

.consult-result h6 {
    color: var(--app-brand);
    border-bottom-color: var(--app-brand);
}

table.doc-table {
    border-top-color: var(--app-brand);
}

table.doc-table h5.color {
    background: var(--app-brand);
}

.denied-main-box h6 {
    border-bottom-color: var(--app-brand);
}

.ask-content,
.notice-content {
    border-top-color: var(--app-brand);
}

ul.vacation-list {
    border-top-color: var(--app-brand);
}

.popup-body > hr {
    border-top-color: var(--app-brand);
}

.profile-main .profile-form .search-btn,
.change-button {
    background-color: var(--app-brand);
    font-family: inherit;
}

.profile-main .profile-form .color-txt {
    color: var(--app-brand);
}

.question-main .list,
.question-list-main a.question-link,
.question-list-main2 a,
.question-list-main .top-btn {
    background-color: var(--app-brand);
    border-radius: var(--cnt-radius-sm);
}

ul.paging-ul > li > a {
    color: var(--app-brand);
}

.privacy-title {
    color: var(--app-brand) !important;
}

/* ===== 8. Card Modernization ===== */
.home-main .profile,
.home-main .income,
.home-main .second {
    border-radius: var(--cnt-radius);
    box-shadow: var(--cnt-shadow);
    transition: box-shadow var(--cnt-transition);
}

.home-main .profile:hover,
.home-main .income:hover,
.home-main .second:hover {
    box-shadow: var(--cnt-shadow-lg);
}

/* ===== 9. Moderation Pages (jnl_*) Override ===== */
.mod-wrap h1 {
    font-weight: 700;
    color: var(--cnt-text);
}

.mod-table th {
    background: var(--cnt-bg);
    color: var(--cnt-text);
    font-weight: 600;
    border-bottom: 2px solid var(--cnt-border);
}

.mod-table td {
    border-bottom: 1px solid var(--cnt-border);
    color: var(--cnt-text);
}

.mod-table tr:hover {
    background: rgba(2, 174, 213, 0.04);
}

.filter-bar .btn-search {
    background: var(--app-brand) !important;
    border-radius: var(--cnt-radius-sm);
    font-weight: 500;
    transition: opacity var(--cnt-transition);
}

.filter-bar .btn-search:hover {
    opacity: 0.9;
}

.filter-bar input,
.filter-bar select {
    border: 1px solid var(--cnt-border);
    border-radius: var(--cnt-radius-sm);
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--app-brand);
    outline: none;
    box-shadow: 0 0 0 2px rgba(2, 174, 213, 0.15);
}

.info-box {
    background: rgba(2, 174, 213, 0.08);
    color: var(--cnt-text);
    border: 1px solid rgba(2, 174, 213, 0.2);
    border-radius: var(--cnt-radius-sm);
}

.stat-card {
    background: #fff;
    border: 1px solid var(--cnt-border);
    border-radius: var(--cnt-radius);
    box-shadow: var(--cnt-shadow);
}

.stat-card .num {
    color: var(--app-brand) !important;
}

.pagination a.active {
    background: var(--app-brand) !important;
    border-color: var(--app-brand) !important;
}

.pagination a:hover:not(.active) {
    border-color: var(--app-brand);
    color: var(--app-brand);
}

/* ===== 10. Mobile Modal Override ===== */
@media screen and (max-width: 768px) {
    .gnb > li {
        margin-left: 16px;
    }

    .modal-body > ul > li {
        border-bottom-color: var(--cnt-border);
        font-weight: 500;
    }

    .modal-body > ul > li a {
        color: var(--cnt-text);
    }

    .modal-body > ul > li a:hover {
        color: var(--app-brand);
    }
}

/* ===== 11. Form inputs global polish ===== */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: var(--app-brand);
    outline: none;
    box-shadow: 0 0 0 2px rgba(2, 174, 213, 0.15);
}

/* ===== 12. FAQ accordion override ===== */
.faq-list .dropdown [data-toggle="dropdown"] {
    border-radius: var(--cnt-radius-sm);
}

.faq-list .dropdown [data-toggle="dropdown"]:hover {
    background: #e8e8e8;
}

/* ===== 13. Change Title color ===== */
.change-title {
    color: var(--cnt-text);
}