/* =========================================================
   포트폴리오 (BBSS005) 전용 CSS — simple 테마.
   카드 그리드/캡션은 #sc_portfolio 기준 자기완결로 정의 (main_sc3/main.css 의존 폐지).

   적용 페이지:
     - list.html  (#sc_portfolio.wFix > #portf_wrap.tab_con > a — 4열 지그재그 그리드)
     - view.html  (port_main + port_nav + port_txt + port_body)
     - write.html (sub_main.portfolio_write)
   ========================================================= */

/* ---------- 목록 카드 그리드 (자기완결 — main_sc3/main.css 의존 폐지) ---------- */
#sc_portfolio {
    background: #fff;
}
#sc_portfolio .tab {
    margin-bottom: 60px;
}
#sc_portfolio .tab a {
    color: #333;
    border: 1px solid #ddd;
}
#sc_portfolio .tab a.on,
#sc_portfolio .tab a:hover {
    color: #fff;
    border-color: transparent;
}
/* 카드 컨테이너 — 한 줄 4개 그리드 + 지그재그 (main_sc3 의 display:none/flex 대체) */
#sc_portfolio .tab_con { display: none; }
#sc_portfolio .tab_con.on {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;   /* 카드 적을 때 왼쪽부터 */
    align-items: flex-start;
    gap: 30px 60px;
    margin: 0 auto;
}
/* 카드 — 한 줄 4개. main.css 의 nth-child 마이너스 margin 은 base 의 !important 로 전부 무효화.
   align-self: flex-start — row stretch 막아 aspect-ratio(3/4) 유지. */
#sc_portfolio #portf_wrap.tab_con a {
    display: block;
    position: relative;                   /* 배지·썸네일·캡션 absolute 기준 (main_sc3 base 대체) */
    overflow: hidden;
    flex: 0 0 calc((100% - 180px) / 4);   /* 4열, 가로 gap 60px*3 빼고 1/4 */
    aspect-ratio: 3 / 4;
    background: #f4f4f4;
    border-radius: 14px;
    height: auto;
    margin-top: 0 !important;
    align-self: flex-start;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);   /* main.css 의 무거운 offset shadow 대체 */
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* hover — 카드 살짝 떠오름 + 이미지 줌 + 캡션/MORE 강조 */
#sc_portfolio #portf_wrap.tab_con a:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}
#sc_portfolio #portf_wrap.tab_con a:hover img { transform: scale(1.06); }
#sc_portfolio #portf_wrap.tab_con a:hover .txt .more { opacity: 1; gap: 0.55rem; }
#sc_portfolio #portf_wrap.tab_con a:hover .txt .more .material-symbols-outlined { transform: translateX(3px); }
/* 지그재그 효과 — 짝수 카드(2,4,6…)만 아래로 */
#sc_portfolio #portf_wrap.tab_con a:nth-child(2n) {
    margin-top: 60px !important;
}
#sc_portfolio .tab_con a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;   /* hover 줌 */
}
#sc_portfolio .tab_con a .thumb_placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}
#sc_portfolio .tab_con a .thumb_placeholder .material-icons {
    font-size: 3rem;
}
/* 반응형 (표준 BP) — 1600↓ 3열 / 1200↓ 2열(지그재그 해제) / 900↓ 1열 */
@media (max-width: 1600px) {   /* 일반 데스크탑·노트북 (1366·1440 포함) */
    #sc_portfolio #portf_wrap.tab_con a {
        flex: 0 0 calc((100% - 120px) / 3);   /* 3열 */
    }
}
@media (max-width: 1200px) {   /* 좁은 노트북·태블릿 가로 (1024 포함) */
    #sc_portfolio .tab_con.on { gap: 24px; }
    #sc_portfolio #portf_wrap.tab_con a,
    #sc_portfolio #portf_wrap.tab_con a:nth-child(2n) {
        flex: 0 0 calc((100% - 24px) / 2);    /* 2열 */
        margin-top: 0 !important;
    }
}
@media (max-width: 900px) {    /* 모바일·태블릿 세로 */
    #sc_portfolio .tab_con.on { gap: 16px; }
    #sc_portfolio #portf_wrap.tab_con a,
    #sc_portfolio #portf_wrap.tab_con a:nth-child(2n) {
        flex: 0 0 100%;
        aspect-ratio: 4 / 3;
        margin: 0 !important;
    }
}

/* 검색/탭 — 공지사항과 동일한 공통 컴포넌트 사용(search_st5 · nav_tabsSt4, common.css). 포폴 자체 .port_search 폐지 */

/* ---------- 카드 배지 + 메타 ---------- */
/* 공지 배지 — 시각 스타일은 공통 .cate (common.css, 공지사항과 동일). 여긴 위치만 */
#sc_portfolio .tab_con a .badge_notice {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 12;
}
#sc_portfolio .tab_con a .badge_secret,
#sc_portfolio .tab_con a .badge_file {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    padding: 4px;
    font-size: 1rem;
}
#sc_portfolio .tab_con a .badge_file { right: 40px; }

.card_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0.5rem 0 0.8rem;
}
.card_meta .meta_item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.card_meta .meta_item .material-icons { font-size: 0.95rem; }
.card_meta em { font-style: normal; }

/* ---------- 카드 캡션(.txt) — 항상 보이는 하단 그라데이션 (분류 pill + 2줄 제목 + MORE) ---------- */
#sc_portfolio .tab_con a .txt {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    padding: 2.6rem 1.3rem 1.3rem;
    color: #fff;
    text-align: left;
    background: linear-gradient(to top, rgba(17,20,32,0.88) 0%, rgba(17,20,32,0.45) 55%, rgba(17,20,32,0) 100%);
}
/* 카테고리 태그(pill) — 목록 카드 캡션 + 뷰 히어로(port_main) 공통 스타일. 둘 다 .tag 클래스로 적용 */
#sc_portfolio .tab_con a .txt .tag,
.port_main .tit .tag {
    display: inline-flex;          /* flex 아이템(뷰 h3)로 blockify 돼도 폭 안 늘어나게 */
    align-items: center;
    justify-content: center;       /* text-align 대신 flex 로 텍스트 중앙 */
    letter-spacing: normal;        /* 뷰 히어로(.port_main letter-spacing:.625rem) 상속 해제 — 자간 벌어짐/우측 쏠림 방지 */
    text-align: center;
    width: fit-content;            /* 콘텐츠 폭에 딱 맞춤 (넓어짐 방지) */
    align-self: flex-start;        /* 부모 flex(.port_main .tit)에서 stretch 방지 */
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}
#sc_portfolio .tab_con a .txt h4 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#sc_portfolio .tab_con a .txt .more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: gap 0.25s ease, opacity 0.25s ease;
}
#sc_portfolio .tab_con a .txt .more .material-symbols-outlined { font-size: 1rem; transition: transform 0.25s ease; }

/* 탭(nav_tabsSt3)·검색(search_st4) 반응형은 common.css 에서 컴포넌트 자체로 처리 (포폴 스코프 오버라이드 불필요) */

/* 글쓰기 버튼 — 공지사항과 동일한 공통 컴포넌트(btn_wrap btn_right + btn btn_l btn_primary) 사용. 포폴 자체 .portfolio_actions/.btn_write 폐지 */

/* 페이징 — 공지사항과 동일한 공통 컴포넌트(paging_wrap paging_st3, common.css) 사용. 포폴 자체 .portfolio_paging 폐지 */

/* ===== view.html ===== */

/* ── 다크 시네마틱 케이스스터디 뷰 (2026-07 리디자인) ─────────────
   페이지 전체 다크, 풀블리드 이미지 히어로(하단·좌측 정렬), 네온 블루 포인트,
   본문은 밝은 카드로 대비. */
.portfolio_view { background: #0d0e12; }
/* 게시판명 비주얼(.sub_tit) 은 뷰페이지에서만 숨김 (.portfolio_view 는 view.html 에만) */
body:has(.portfolio_view) .sub_tit { display: none; }
/* 헤더 색은 main.js 가 .portfolio_view 를 다크로 감지 → 이 페이지는 항상 흰색(=비-scrolled) 상태.
   그래서 .main_header.scrolled 에 걸린 프로스티드 글래스(backdrop-filter)가 안 붙음 → 여기서 직접 부여. */
body:has(.portfolio_view) .main_header {
    backdrop-filter: blur(5px) brightness(1.1);
    -webkit-backdrop-filter: blur(5px) brightness(1.1);
}

/* port_main — 풀블리드 시네마틱 히어로. thumb_url 은 inline style 로 배경 지정 */
.port_main {
    position: relative;
    height: auto;          /* main.css 의 .port_main{height:100vh} 무력화 → min-height 가 실제 높이 제어 */
    min-height: 75vh;
    background-color: #14161c;
    background-image: linear-gradient(135deg, #1a2340 0%, #0d0e12 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 3.5rem clamp(1.5rem, 6vw, 7rem) 3rem;
    color: #fff;
    overflow: hidden;
}
.port_main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8,9,12,.95) 0%, rgba(8,9,12,.55) 45%, rgba(8,9,12,.12) 100%);
    pointer-events: none;
}
.port_main .tit {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 1000px;
}
/* 히어로 카테고리 — pill 시각은 공통 .tag 규칙, 여긴 위치(제목 위)·간격만 */
.port_main .tit h3 {
    order: -1;
    margin-bottom: 1.1rem;
}
.port_main .tit h2 {
    font-size: clamp(2rem, 5.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 30px rgba(0,0,0,.55);
}

/* port_nav — 다크 미니멀 (네온 hover) */
.port_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem 2.2rem;
    padding: 1.1rem 1.5rem;
    background: rgba(17, 19, 24, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);               /* 프로스티드 글래스 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #cfd4de;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    position: sticky;
    top: 4.5rem;      /* 헤더 바로 밑에 딱 붙게 */
    z-index: 90;      /* 헤더(z-index:100) 아래 */
    transition: top .6s ease;   /* 헤더 숨김/표시(.6s)와 동기화해 함께 이동 */
}
/* 헤더가 스크롤로 숨겨지면(.header-hide) port_nav 위 4.5rem 빈틈 제거 — 최상단에 붙임 */
body:has(.main_header.header-hide) .port_nav { top: 0; }
.port_nav a,
.port_nav span.disabled,
.port_nav button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.15rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    background: transparent;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
}
/* hover — 밝아지며 밑줄이 좌→우로 그려짐 (텍스트 네비 세련되게) */
.port_nav a::after,
.port_nav button::after {
    content: '';
    position: absolute;
    left: 0.15rem;
    right: 0.15rem;
    bottom: 0.12rem;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s ease;
}
.port_nav a:hover,
.port_nav button:hover { color: #fff; }
.port_nav a:hover::after,
.port_nav button:hover::after { transform: scaleX(1); }
.port_nav span.disabled { opacity: 0.25; cursor: default; }
.port_nav .material-icons,
.port_nav .material-symbols-outlined { font-size: 1.15rem; }
/* 목록 — 원형 아이콘 버튼으로 강조(가운데) */
.port_nav .list {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.port_nav .list::after { display: none; }   /* 원형엔 밑줄 없음 */
.port_nav .list:hover {
    color: #fff;
    border-color: rgba(56, 161, 255, 0.6);
    background: rgba(56, 161, 255, 0.12);
}
.port_nav .list .material-icons,
.port_nav .list .material-symbols-outlined { font-size: 1.25rem; }
/* 액션 — 색 유지(밑줄도 currentColor 로 같은 색) */
.port_nav .edit   { color: #7cc0ff; }
.port_nav .delete { color: #ff7a7a; }
.port_nav .answer { color: #f0c674; }

/* 외부링크 버튼 (overview 안) — 네온 그라데이션 */
.port_txt .btn_st2 {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    background: linear-gradient(135deg, #2f80ff 0%, #1a5fe0 100%);
    color: #fff;
    padding: 1rem 1.6rem;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 2rem;
    box-shadow: 0 10px 26px rgba(47,128,255,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.port_txt .btn_st2:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(47,128,255,.5); }
.port_txt .btn_st2 .tit { font-weight: 700; line-height: 1.2; }
.port_txt .btn_st2 .material-icons,
.port_txt .btn_st2 .material-symbols-outlined { font-size: 1.4rem; }
/* Go to website 화살표(call_made ↗) 애니메이션 */
.port_txt .btn_st2 .btn-motion1 { animation: port-arrow 1.4s ease-in-out infinite; }
@keyframes port-arrow {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(3px, -3px); }
}

/* 첨부파일 — 다크 */
.port_files {
    background: #111318;
    padding: 2.5rem clamp(1.5rem, 6vw, 7rem);
    border-top: 1px solid rgba(255,255,255,.06);
}
.port_files .inner { max-width: 900px; margin: 0 auto; }
.port_files h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem; color: #e9ecf2; letter-spacing: 0.05em; }
.port_files h3 span { color: #38a1ff; }
.port_files ul { list-style: none; padding: 0; margin: 0; }
.port_files li { margin-bottom: 0.5rem; font-size: 0.95rem; }
.port_files li a { color: #cfd4de; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.port_files li a:hover { color: #38a1ff; }
.port_files li .size { color: #6f7788; font-size: 0.85rem; margin-left: 0.4rem; }

/* 추천/반대 — 다크 */
.port_vote {
    padding: 3rem clamp(1.5rem, 6vw, 7rem);
    background: #0d0e12;
    border-top: 1px solid rgba(255,255,255,.06);
}
.port_vote .inner { max-width: 600px; margin: 0 auto; display: flex; gap: 1rem; justify-content: center; }
.btn_vote {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.5rem;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.03);
    color: #cfd4de;
    border-radius: 10px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.btn_vote em { font-style: normal; font-weight: 700; margin-left: 0.3rem; }
.btn_vote:hover:not(:disabled) { border-color: #38a1ff; color: #fff; background: rgba(56,161,255,.12); }
.btn_vote.up.on    { background: #2f80ff; border-color: #2f80ff; color: #fff; }
.btn_vote.down.on  { background: #e04b5a; border-color: #e04b5a; color: #fff; }
.btn_vote:disabled { opacity: 0.45; cursor: not-allowed; }

/* 댓글 폼 — 다크 */
.reply_form {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.reply_form .guest_inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.reply_form input,
.reply_form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.04);
    color: #e9ecf2;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}
.reply_form input::placeholder,
.reply_form textarea::placeholder { color: #6f7788; }
.reply_form input:focus,
.reply_form textarea:focus { outline: none; border-color: #38a1ff; background: rgba(56,161,255,.08); }
.reply_form textarea { resize: vertical; min-height: 90px; margin-bottom: 0.6rem; }
.btn_save_reply {
    padding: 0.7rem 1.6rem;
    background: linear-gradient(135deg, #2f80ff 0%, #1a5fe0 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 600;
}
.btn_save_reply:hover { box-shadow: 0 8px 20px rgba(47,128,255,.4); }
.reply_disabled {
    margin-top: 1.5rem;
    color: #6f7788;
    font-size: 0.9rem;
    text-align: center;
}

/* 댓글별 액션 */
.reply_actions {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.2rem;
}
.btn_icon {
    background: transparent;
    border: 0;
    color: #6f7788;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    border-radius: 4px;
}
.btn_icon .material-icons,
.btn_icon .material-symbols-outlined { font-size: 1rem; }
.btn_icon:hover { background: rgba(255,255,255,.08); color: #cfd4de; }

/* 비번 / 신고 모달 공통 */
.pw_modal,
.report_modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.pw_modal .modal_inner,
.report_modal .modal_inner {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.pw_modal h3,
.report_modal h3 { margin: 0 0 1rem; color: #222; }
.pw_modal p,
.report_modal p { color: #666; margin: 0 0 1rem; }
.pw_modal input[type="password"],
.report_modal select,
.report_modal textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 0.95rem;
    box-sizing: border-box;
    font-family: inherit;
    margin-bottom: 0.6rem;
}
.report_modal textarea { resize: vertical; min-height: 80px; }
.modal_actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}
.modal_actions .btn_cancel,
.modal_actions .btn_save {
    padding: 0.6rem 1.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
    border: 1px solid;
}
.modal_actions .btn_cancel { background: #fff;     color: #555; border-color: #ddd; }
.modal_actions .btn_save   { background: #1a3b8e;  color: #fff; border-color: #1a3b8e; }
.modal_actions .btn_cancel:hover { background: #f5f5f5; }
.modal_actions .btn_save:hover   { background: #14306f; border-color: #14306f; }

/* ---------- overview (port_txt) — 다크, 폭은 .tit.wFix 담당, 네온 라벨 + 가로 메타 ---------- */
.port_txt {
    padding: 4rem 0;             /* 세로 여백만. 좌우는 .tit.wFix(공통 wFix) 가 담당 */
    background: #0d0e12;
}
.port_txt h3 {                   /* OVERVIEW 라벨 */
    font-size: 0.78rem;
    font-weight: 700;
    color: #38a1ff;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 1.6rem;
}
/* 가로 메타 — span(라벨 위)/p(값 아래) 쌍이 열 단위, 상하 hairline */
.port_txt .info {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    justify-content: start;
    align-items: start;
    gap: 0.45rem 3.5rem;
    padding: 1.6rem 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.port_txt .info span {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6f7788;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.port_txt .info p {
    font-size: 1.05rem;
    color: #e9ecf2;
    font-weight: 600;
    margin: 0;
}

/* ---------- 본문 (port_body) — 다크 배경, 폭은 .wFix, 밝은 카드 ---------- */
.port_body {
    padding: 0 0 4.5rem;         /* overview 와 이어지게 상단 0. 좌우는 .wFix */
    background: #0d0e12;
}
.port_content {                  /* 폭은 감싼 .wFix 가 담당 (max-width/margin 지정 X) */
    background: #fff;
    color: #2a2d34;
    border-radius: 14px;
    padding: clamp(1.8rem, 4vw, 3.5rem);
    font-size: 1.05rem;
    line-height: 1.85;
    box-shadow: 0 16px 44px rgba(0,0,0,.35);
}
.port_content img { max-width: 100%; height: auto; display: block; margin: 1.6rem auto; border-radius: 10px; }
.port_content p   { margin: 1.1rem 0; }
.port_content h2,
.port_content h3 { margin: 2rem 0 1rem; color: #12213f; }
.port_empty {                    /* 폭은 .wFix */
    text-align: center;
    color: #8b93a3;
    padding: 4rem 1rem;
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 14px;
}

/* 댓글 (view) — 다크 */
.port_replies {
    background: #111318;
    padding: 3.5rem clamp(1.5rem, 6vw, 7rem);
    border-top: 1px solid rgba(255,255,255,.06);
}
.reply_inner {
    max-width: 900px;
    margin: 0 auto;
}
.reply_inner h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #e9ecf2;
}
.reply_inner h3 span { color: #38a1ff; margin-left: 0.3rem; }
.reply_list { list-style: none; padding: 0; margin: 0; }
.reply_item {
    padding: 1.3rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.reply_item:last-child { border-bottom: none; }
.reply_meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
}
.reply_meta .writer { color: #e9ecf2; font-weight: 600; }
.reply_meta .date   { color: #6f7788; }
.reply_content { color: #b8bfcc; line-height: 1.7; }
.reply_empty   { color: #6f7788; text-align: center; padding: 2rem 0; }

/* ===== write.html ===== */

.portfolio_write form {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 2rem;
}
.form_row {
    margin-bottom: 1.5rem;
}
.form_row_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form_field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.5rem;
}
.form_field label .required { color: #e03b3b; font-style: normal; margin-left: 0.2rem; }
.form_field input[type="text"],
.form_field input[type="password"],
.form_field select,
.form_field textarea {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}
.form_field textarea { resize: vertical; min-height: 200px; }
.form_field input:focus,
.form_field select:focus,
.form_field textarea:focus {
    outline: none;
    border-color: #1a3b8e;
    box-shadow: 0 0 0 3px rgba(26, 59, 142, 0.1);
}

.portfolio_dropzone {
    min-height: 100px;
    padding: 1rem;
    border: 2px dashed #cdd5df;
    border-radius: 6px;
    background: #fafafa;
}

.form_actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

/* 폼 버튼(등록/저장/취소)은 공통 common.css .btn 계열(btn_primary/btn_cancel 등) 사용 — 포폴 자체 정의 폐지 */

/* ===== 모바일 반응형 ===== */
@media (max-width: 768px) {
    .portfolio_main,
    .portfolio_write { padding: 2rem 1rem 4rem; }
    .portfolio_grid  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
    .portfolio_card .txt { padding: 0.9rem; }
    .portfolio_card h4   { font-size: 0.95rem; }
    .port_main       { min-height: 40vh; padding: 4rem 1.5rem; }
    .form_row_2      { grid-template-columns: 1fr; }
    .portfolio_write form { padding: 1.5rem 1rem; }
}