/* Accessibility - Hide Screen Reader Only Texts (Web Editor Helper Texts) */
.sound_only {
    display: none !important;
}

/* Hero Banner Section */
.portfolio_main_section {
    position: relative;
    width: 100%;
    min-height: 550px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.portfolio_main_section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35); /* Elegant semi-dark overlay */
    z-index: 1;
}

.portfolio_main_container {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.portfolio_main_content {
    text-align: center;
    color: #FFFFFF;
}

.portfolio_main_en {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 4px;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.portfolio_main_ko {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 52px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Page Body Container */
.portfolio_list_container,
.portfolio_view_container {
    width: 100%;
    background: #FFFFFF;
    padding: 100px 0 120px 0;
    box-sizing: border-box;
}

.portfolio_inner_wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Title Block and Brand Styling */
.portfolio_title_section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px; /* Beautifully separates the list title from category navigation below */
    padding-bottom: 0px;
}

.portfolio_list_title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #222222;
    margin: 0;
    letter-spacing: -0.02em;
}

.portfolio_list_title .brand_color {
    color: #2B308B;
}

/* Floating Action Circle Links */
.portfolio_action_links {
    display: flex;
    gap: 12px;
}

.portfolio_action_btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    font-size: 18px;
}

.portfolio_action_btn.write_btn {
    background: #FFFFFF;
    color: #222222;
    border: 1px solid #ECECF2;
}

.portfolio_action_btn.write_btn:hover {
    background: #ECECF2;
    transform: translateY(-2px);
}

.portfolio_action_btn.tel_btn {
    background: #2B308B;
    color: #FFFFFF;
}

.portfolio_action_btn.tel_btn:hover {
    background: #1D2173;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(43, 48, 139, 0.25);
}

/* Category Navigation Filter - Modern Horizontal Scrollable Pills */
.portfolio_category_nav {
    margin-bottom: 70px; /* Spacing below the category list */
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.portfolio_category_nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar for clean layout */
}

.portfolio_cate_ul {
    display: flex;
    justify-content: flex-start; /* Left-aligned pills on desktop */
    gap: 10px;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    white-space: nowrap;
}

.portfolio_cate_link {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #555555;
    background: #FFFFFF;
    border: 1px solid #ECECF2;
    padding: 12px 24px;
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    transition: all 0.25s ease;
}

.portfolio_cate_link:hover {
    border-color: #2B308B;
    color: #2B308B;
}

.portfolio_cate_link.active {
    background: #2B308B;
    border-color: #2B308B;
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(43, 48, 139, 0.15);
}

/* Middle Section - Title and Round Search Bar (Search placed on separate row under category title) */
.portfolio_middle_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px; /* Balanced spacing above active category title */
    margin-bottom: 70px; /* Balanced spacing below active category title */
    width: 100%;
}

.portfolio_middle_title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #222222;
    margin: 0 0 40px 0; /* Greatly expanded space separating category name from search/content below */
    text-align: center; /* Center active category name in page middle */
    line-height: 1.2;
    width: 100%;
}

.portfolio_search_wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Right-align search bar on desktop */
}

.portfolio_search_form {
    width: 100%;
    max-width: 320px; /* Elegant right-aligned capsule on desktop */
}

.portfolio_search_box {
    position: relative;
    width: 100%;
}

.portfolio_search_input {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: #222222;
    background: #F8F8FC;
    border: 1px solid #ECECF2;
    border-radius: 25px;
    padding: 11px 45px 11px 20px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.portfolio_search_input::placeholder {
    color: #A0A0B0;
}

.portfolio_search_input:focus {
    background: #FFFFFF;
    border-color: #2B308B;
    box-shadow: 0 0 0 3px rgba(43, 48, 139, 0.05);
}

.portfolio_search_btn {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #888899;
    cursor: pointer;
    font-size: 15px;
    padding: 0;
    transition: color 0.2s ease;
}

.portfolio_search_btn:hover {
    color: #2B308B;
}

/* Responsive 4-Column (Desktop) / 2-Column (Mobile) Grid List */
.portfolio_grid_list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 24px;
    width: 100%;
    margin-bottom: 50px;
    box-sizing: border-box;
}

.portfolio_grid_item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevents long nowrap titles from expanding the grid item width */
}

/* Admin Multiple Checkbox styling */
.portfolio_all_chk {
    margin-bottom: 20px;
    padding: 10px 15px;
    background: #F8F8FC;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
}

.portfolio_chk {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
}

.chk_box input[type="checkbox"] {
    display: none;
}

.chk_box label {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555555;
    font-weight: 500;
}

.chk_box label span {
    width: 18px;
    height: 18px;
    border: 2px solid #D2D2D8;
    background: #FFFFFF;
    display: inline-block;
    margin-right: 8px;
    box-sizing: border-box;
    position: relative;
    transition: all 0.2s ease;
}

.chk_box input[type="checkbox"]:checked + label span {
    background: #2B308B;
    border-color: #2B308B;
}

.chk_box input[type="checkbox"]:checked + label span::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Grid Card Items Styling */
.portfolio_card_link {
    text-decoration: none;
    display: block;
    width: 100%;
}

.portfolio_card_image_wrap {
    width: 100%;
    aspect-ratio: 380 / 320; /* 380:320 portrait-like aspect ratio matches refinements */
    border-radius: 16px;
    overflow: hidden;
    background: #ECECF2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s ease;
}

.portfolio_card_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.portfolio_card_link:hover .portfolio_card_image_wrap {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.portfolio_card_link:hover .portfolio_card_img {
    transform: scale(1.08); /* Modern Hover Zoom transition */
}

.portfolio_card_info {
    margin-top: 16px;
    padding: 0 4px;
    text-align: left;
}

.portfolio_card_title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 6px 0;
    line-height: 1.4;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    transition: color 0.2s ease;
}

.portfolio_card_link:hover .portfolio_card_title {
    color: #2B308B;
}

.portfolio_card_date {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #888899;
    display: block;
}

/* Empty List */
.portfolio_empty_list {
    grid-column: span 4;
    text-align: center;
    padding: 80px 0;
    color: #888899;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
}

/* Admin Multi-Actions Bar */
.portfolio_admin_actions {
    margin-top: 30px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.admin_btn {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #ECECF2;
    background: #FFFFFF;
    color: #555555;
    transition: all 0.2s ease;
}

.admin_btn:hover {
    background: #F8F8FC;
    color: #222222;
}

.admin_btn.delete_btn:hover {
    background: #FEF2F2;
    color: #EF4444;
    border-color: #FCA5A5;
}

/* Circle Pagination Styling matching mockup */
.portfolio_pagination_wrap {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.pg_wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pg_wrap a, 
.pg_wrap span, 
.pg_wrap strong {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 500;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.25s ease;
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0 6px;
}

.pg_wrap a {
    color: #888899;
    background: transparent;
    border: 1px solid transparent;
}

.pg_wrap a:hover {
    color: #222222;
    background: #F1F1F6;
    border-color: transparent;
}

.pg_wrap strong.pg_current {
    background: #2B308B;
    color: #FFFFFF;
    border: 1px solid #2B308B;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(43, 48, 139, 0.2);
}

.pg_wrap .sound_only {
    display: none !important;
}

/* Prev/Next arrows styling override to prevent squishing */
.pg_wrap .pg_start,
.pg_wrap .pg_prev,
.pg_wrap .pg_next,
.pg_wrap .pg_end {
    width: auto !important;
    height: 36px;
    line-height: 36px;
    border-radius: 18px !important;
    padding: 0 14px !important;
    font-size: 13px;
    color: #555566;
    background: #FFFFFF;
    border: 1px solid #ECECF2;
    box-sizing: border-box;
}

.pg_wrap .pg_start:hover,
.pg_wrap .pg_prev:hover,
.pg_wrap .pg_next:hover,
.pg_wrap .pg_end:hover {
    background: #2B308B;
    color: #FFFFFF;
    border-color: #2B308B;
    box-shadow: 0 4px 10px rgba(43, 48, 139, 0.2);
}

/* =========================================================================
   Portfolio Detail Page (View Skin Styles)
   ========================================================================= */

.portfolio_view_container {
    /* Inherits width: 100%, background: #FFFFFF, padding: 100px 0 120px 0 from base container styles */
}

.portfolio_view_header {
    text-align: center;
    margin-bottom: 50px;
}

.portfolio_view_cat {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 42px; /* Large bold header title matching mockup */
    font-weight: 800;
    color: #222222;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

.portfolio_view_meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ECECF2;
    padding-bottom: 18px;
    max-width: 100%;
}

.portfolio_view_title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #555555;
    text-align: left;
}

.portfolio_view_date {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #888899;
}

/* Stacked View Image Grid */
.portfolio_view_images {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-bottom: 40px;
}

.portfolio_img_item {
    width: 100%;
    overflow: hidden;
    border-radius: 12px; /* Mockup rounded stacked images */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);
}

.portfolio_img_item img {
    width: 100%;
    height: auto;
    display: block;
}

/* View Content Text block */
.portfolio_view_text_con {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    color: #444455;
    line-height: 1.8;
    padding: 10px 10px 40px 10px;
    text-align: left;
    word-break: keep-all;
}

/* Prev/Next Pagination Link Dividers */
.portfolio_view_nav_list {
    border-top: 1px solid #ECECF2;
    border-bottom: 1px solid #ECECF2;
    padding: 0;
    margin: 50px 0;
    list-style: none;
    width: 100%;
}

.nav_item {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    transition: background 0.2s ease;
    box-sizing: border-box;
}

.nav_item.prev_item {
    border-bottom: 1px solid #F0F0F5;
}

.nav_item:hover {
    background: #F9FAFD;
}

.nav_label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    width: 80px;
    flex-shrink: 0;
    display: inline-block;
}

.nav_link {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #444455;
    text-decoration: none;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    transition: color 0.2s ease;
}

.nav_item:hover .nav_link {
    color: #2B308B;
}

.nav_date {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: #888899;
    flex-shrink: 0;
    margin-left: 20px;
}

/* Back Button Layout - Centered Solid Pill */
.portfolio_view_actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    margin-top: 40px;
}

.portfolio_back_list_btn {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    background: #2B308B;
    text-decoration: none;
    border-radius: 35px; /* Pill shape matches estimate submit button */
    padding: 16px 80px;
    box-shadow: 0 4px 12px rgba(43, 48, 139, 0.15);
    transition: all 0.25s ease;
    display: inline-block;
}

.portfolio_back_list_btn:hover {
    background: #1D2173;
    box-shadow: 0 6px 18px rgba(43, 48, 139, 0.25);
    transform: translateY(-2px);
}

.portfolio_view_admin_opts {
    display: flex;
    gap: 8px;
}

.admin_opt_btn {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #ECECF2;
    background: #FFFFFF;
    color: #555555;
    transition: all 0.2s ease;
}

.admin_opt_btn:hover {
    background: #F8F8FC;
    color: #222222;
}

.admin_opt_btn.del:hover {
    background: #FEF2F2;
    color: #EF4444;
    border-color: #FCA5A5;
}

/* =========================================================================
   Responsive Design & Breakpoints
   ========================================================================= */

@media (max-width: 1199px) {
    .portfolio_main_section {
        min-height: 500px;
    }

    .portfolio_list_container,
    .portfolio_view_container {
        padding: 80px 0 100px 0;
    }

    .portfolio_grid_list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    .portfolio_empty_list {
        grid-column: span 3;
    }
}

@media (max-width: 991px) {
    .portfolio_grid_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .portfolio_empty_list {
        grid-column: span 2;
    }

    .portfolio_view_cat {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .portfolio_main_section {
        min-height: 400px;
    }

    .portfolio_main_ko {
        font-size: 42px;
    }

    .portfolio_list_container,
    .portfolio_view_container {
        padding: 60px 0 80px 0;
    }

    .portfolio_title_section {
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 30px;
        width: 100%;
    }

    .portfolio_list_title {
        font-size: 30px;
    }

    .portfolio_action_links {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 15px;
        justify-content: center;
        width: 100%;
    }

    .portfolio_cate_ul {
        justify-content: flex-start; /* Scrollable horizontally on mobile */
    }

    .portfolio_cate_link {
        padding: 10px 20px;
        font-size: 14px;
    }

    .portfolio_middle_section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        min-height: auto;
        margin-bottom: 30px;
    }

    .portfolio_search_wrap {
        position: static;
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    .portfolio_search_form {
        max-width: 100%;
    }

    .portfolio_view_cat {
        font-size: 28px;
    }

    .portfolio_view_meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .nav_item {
        padding: 15px 10px;
    }

    .nav_label {
        width: 60px;
        font-size: 13px;
    }

    .nav_link {
        font-size: 14px;
    }

    .portfolio_back_list_btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        padding: 15px 0;
    }
}

@media (max-width: 479px) {
    .portfolio_main_section {
        min-height: 320px;
    }

    .portfolio_main_ko {
        font-size: 32px;
    }

    .portfolio_list_title {
        font-size: 26px;
    }

    .portfolio_action_btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .portfolio_card_image_wrap {
        border-radius: 12px;
    }

    .portfolio_card_title {
        font-size: 16px;
    }

    .portfolio_card_date {
        font-size: 13px;
    }
}

/* =========================================================================
   Portfolio Write Page (Write Skin Styles) - Premium Sleek Layout
   ========================================================================= */
.portfolio_write_container {
    padding-top: 80px;
    padding-bottom: 80px;
}

#bo_w.portfolio_write_wrap {
    max-width: 1200px; /* Expanded to match standard 1200px site container width */
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #ECECF2;
    border-radius: 16px;
    padding: 50px 45px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

#bo_w .write_div {
    margin-bottom: 25px;
}

#bo_w .write_label {
    display: block;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 10px;
}

#bo_w .write_label strong {
    color: #E74C3C;
    margin-left: 3px;
    font-weight: bold;
}

#bo_w .frm_input {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    border: 1px solid #ECECF2;
    border-radius: 8px;
    padding: 14px 20px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.25s ease;
    background: #F8F8FC;
    color: #333333;
}

#bo_w .frm_input:focus {
    background: #FFFFFF;
    border-color: #2B308B;
    box-shadow: 0 0 0 3px rgba(43, 48, 139, 0.08);
}

#bo_w select.frm_input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 45px;
}

/* focus within effect for the DHTML editor zone */
#bo_w .wr_content {
    border: 1px solid #ECECF2;
    border-radius: 8px;
    padding: 12px;
    background: #F8F8FC;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

#bo_w .wr_content:focus-within {
    background: #FFFFFF;
    border-color: #2B308B;
    box-shadow: 0 0 0 3px rgba(43, 48, 139, 0.08);
}

/* Premium Drag-and-Drop styled File Upload field */
.file_upload_box {
    position: relative;
    background: #F8F8FC;
    border: 1px dashed #D0D0DC;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file_upload_box:hover {
    border-color: #2B308B;
    background: #F2F2F9;
}

.file_upload_box input[type="file"] {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: #555555;
    cursor: pointer;
    outline: none;
}

.file_del_info {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    color: #E74C3C;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    border-top: 1px solid #ECECF2;
    padding-top: 8px;
}

.file_del_info input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #E74C3C;
}

.file_del_info label {
    cursor: pointer;
}

#bo_w .btn_confirm {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 50px;
}

#bo_w .btn_confirm .btn {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 50px;
    border-radius: 30px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

#bo_w .btn_confirm .btn_cancel {
    background: #FFFFFF;
    border: 1px solid #ECECF2;
    color: #555555;
}

#bo_w .btn_confirm .btn_cancel:hover {
    background: #F8F8FC;
    color: #222222;
}

#bo_w .btn_confirm .btn_submit {
    background: #2B308B;
    border: 1px solid #2B308B;
    color: #FFFFFF;
}

#bo_w .btn_confirm .btn_submit:hover {
    background: #1D2173;
    box-shadow: 0 6px 18px rgba(43, 48, 139, 0.2);
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    #bo_w.portfolio_write_wrap {
        padding: 30px 20px;
        border-radius: 12px;
    }
    
    #bo_w .btn_confirm .btn {
        padding: 14px 35px;
        font-size: 15px;
    }
}

/* =========================================================================
   Premium Search Keyword Highlighting (검색결과 키워드 줄바꿈/틀어짐 방지)
   ========================================================================= */
.portfolio_card_title .sch_word,
.sch_word {
    display: inline !important;
    background: transparent !important;
    color: #2B308B !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
}