@charset "utf-8";

/* ========================================
   doje 이미지형 게시판 스킨
   ======================================== */

.doje-bo {
    --doje-fg: #1b1d21;
    --doje-fg-sub: #7b8290;
    --doje-line: #e6e8ec;
    --doje-bg-soft: #f6f7f9;
    --doje-accent: #2f6fed;
    --doje-radius: 10px;

    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px 60px;
    color: var(--doje-fg);
    font-size: 15px;
    line-height: 1.6;
    box-sizing: border-box;
}
.doje-bo *, .doje-bo *:before, .doje-bo *:after { box-sizing: inherit; }
.doje-bo a { color: inherit; text-decoration: none; }

/* 카테고리 */
.doje-cate { margin: 0 0 24px; }
.doje-cate h2 { display: none; }
.doje-cate ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.doje-cate li a {
    display: block; padding: 8px 18px; border: 1px solid var(--doje-line);
    border-radius: 999px; font-size: 14px; color: var(--doje-fg-sub);
    transition: all .15s;
}
.doje-cate li a:hover { border-color: var(--doje-accent); color: var(--doje-accent); }
.doje-cate li a.on { background: var(--doje-fg); border-color: var(--doje-fg); color: #fff; }

/* 상단 바 */
.doje-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 0 14px; margin-bottom: 20px;
    border-bottom: 2px solid var(--doje-fg);
}
.doje-total { font-size: 14px; color: var(--doje-fg-sub); }
.doje-total strong { color: var(--doje-fg); }
.doje-tools { display: flex; gap: 8px; align-items: center; margin: 0; padding: 0; list-style: none; }

.doje-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 16px; border: 1px solid var(--doje-line);
    border-radius: 8px; background: #fff; color: var(--doje-fg);
    font-size: 14px; line-height: 1; cursor: pointer; white-space: nowrap;
    transition: all .15s;
}
.doje-btn:hover { border-color: var(--doje-fg); }
.doje-btn--primary { background: var(--doje-fg); border-color: var(--doje-fg); color: #fff; }
.doje-btn--primary:hover { opacity: .85; }
.doje-btn--icon { width: 38px; padding: 0; }

/* 목록 그리드 */
.doje-grid { display: grid; gap: 30px 20px; margin: 0; padding: 0; list-style: none; }
.doje-grid.cols-1 { grid-template-columns: 1fr; }
.doje-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.doje-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.doje-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.doje-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.doje-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

.doje-item { position: relative; }
.doje-item__chk { position: absolute; top: 10px; left: 10px; z-index: 3; }
.doje-item.is-now .doje-thumb { outline: 3px solid var(--doje-accent); outline-offset: -3px; }

.doje-thumb {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--doje-radius); background: var(--doje-bg-soft);
    aspect-ratio: 4 / 3;
}
.doje-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
}
.doje-thumb:hover img { transform: scale(1.05); }
.doje-thumb__none, .doje-thumb__notice {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--doje-fg-sub); font-size: 13px; letter-spacing: .05em;
}
.doje-thumb__notice { background: var(--doje-fg); color: #fff; font-size: 15px; font-weight: 600; }

/* 로그인 잠금 (전후사진) */
.doje-thumb--lock { background: linear-gradient(135deg, #eceff3 0%, #dfe3ea 100%); }
.doje-lock {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; text-align: center;
    color: #5c6373; padding: 12px;
}
.doje-lock i { font-size: 26px; opacity: .55; }
.doje-lock b { font-size: 13px; font-weight: 600; }
.doje-lock span { font-size: 12px; color: #8b93a3; }
.doje-thumb--lock:hover .doje-lock i { opacity: .8; }

.doje-notice-badge {
    display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 4px;
    background: var(--doje-fg); color: #fff; font-size: 11px; vertical-align: 2px;
}

.doje-item__body { padding: 14px 2px 0; }
.doje-item__cate {
    display: inline-block; margin-bottom: 6px; font-size: 12px;
    color: var(--doje-accent); font-weight: 600;
}
.doje-item__tit {
    font-size: 16px; font-weight: 600; line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.doje-item__tit:hover { color: var(--doje-accent); }
.doje-item__desc {
    margin-top: 6px; font-size: 13px; color: var(--doje-fg-sub);
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.doje-item__meta {
    margin-top: 10px; font-size: 12px; color: var(--doje-fg-sub);
    display: flex; flex-wrap: wrap; gap: 12px;
}
.doje-new { margin-left: 4px; padding: 1px 5px; border-radius: 3px; background: #e8453c; color: #fff; font-size: 10px; vertical-align: 2px; }
.doje-cmt { margin-left: 4px; color: var(--doje-accent); font-weight: 600; }

.doje-empty {
    grid-column: 1 / -1; padding: 90px 0; text-align: center;
    color: var(--doje-fg-sub); background: var(--doje-bg-soft); border-radius: var(--doje-radius);
}

/* 하단 */
.doje-bottom { display: flex; justify-content: flex-end; margin-top: 26px; }

/* 검색 */
.doje-sch { display: none; margin-top: 30px; }
.doje-sch.on { display: block; }
.doje-sch form {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
    padding: 20px; background: var(--doje-bg-soft); border-radius: var(--doje-radius);
}
.doje-sch h3 { display: none; }
.doje-sch select, .doje-sch input[type=text] {
    height: 40px; padding: 0 12px; border: 1px solid var(--doje-line);
    border-radius: 8px; background: #fff; font-size: 14px;
}
.doje-sch input[type=text] { width: 260px; max-width: 55vw; }

/* 페이지네이션 */
.doje-bo .pg_wrap { display: block; margin: 40px 0 0; text-align: center; }
.doje-bo .pg { display: inline-flex; gap: 4px; }
.doje-bo .pg_page, .doje-bo .pg_current {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 8px; border-radius: 8px;
    border: 1px solid var(--doje-line); background: #fff; font-size: 14px;
}
.doje-bo .pg_current { background: var(--doje-fg); border-color: var(--doje-fg); color: #fff; }

/* ========================================
   보기
   ======================================== */
.doje-view__head { padding: 10px 0 22px; border-bottom: 2px solid var(--doje-fg); }
.doje-view__cate { display: inline-block; margin-bottom: 10px; font-size: 13px; color: var(--doje-accent); font-weight: 600; }
.doje-view__tit { margin: 0; font-size: 26px; line-height: 1.4; font-weight: 700; word-break: keep-all; }
.doje-view__meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--doje-fg-sub); }

.doje-view__body {
    padding: 36px 4px; min-height: 200px; font-size: 16px; line-height: 1.8;
    border-bottom: 1px solid var(--doje-line); word-break: break-word;
}
.doje-view__body img, .doje-view__body video, .doje-view__body iframe { max-width: 100%; height: auto; }
.doje-view__body table { max-width: 100%; }

.doje-files { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--doje-line); list-style: none; }
.doje-files li { padding: 4px 0; font-size: 14px; }
.doje-files a { color: var(--doje-accent); }

.doje-view__btns { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.doje-view__btns ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }

.doje-nav { margin-top: 40px; border-top: 1px solid var(--doje-line); }
.doje-nav dl { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 6px; border-bottom: 1px solid var(--doje-line); }
.doje-nav dt { flex: 0 0 70px; font-size: 13px; color: var(--doje-fg-sub); }
.doje-nav dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 로그인 안내 박스 */
.doje-loginwall {
    margin: 30px 0; padding: 46px 20px; text-align: center;
    background: var(--doje-bg-soft); border-radius: var(--doje-radius);
}
.doje-loginwall p { margin: 0 0 16px; color: var(--doje-fg-sub); }
.doje-loginwall strong { display: block; margin-bottom: 8px; font-size: 18px; color: var(--doje-fg); }

/* ========================================
   쓰기
   ======================================== */
.doje-write { max-width: 1000px; }
.doje-write__tit { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--doje-fg); font-size: 22px; }
.doje-fld { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--doje-line); align-items: flex-start; }
.doje-fld > label, .doje-fld > .doje-fld__label { flex: 0 0 120px; padding-top: 9px; font-size: 14px; font-weight: 600; }
.doje-fld__in { flex: 1 1 auto; min-width: 0; }
.doje-fld__in input[type=text], .doje-fld__in input[type=password], .doje-fld__in select, .doje-fld__in textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--doje-line);
    border-radius: 8px; font-size: 15px; background: #fff;
}
.doje-fld__in textarea { min-height: 300px; }
.doje-fld__opt { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; }
.doje-fld__help { margin-top: 6px; font-size: 12px; color: var(--doje-fg-sub); }
.doje-write__btns { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.doje-write__btns .doje-btn { height: 46px; padding: 0 32px; font-size: 15px; }
.doje-fld__in input[type=date], .doje-fld__in input[type=number] { padding: 10px 12px; border: 1px solid var(--doje-line); border-radius: 8px; font-size: 15px; background: #fff; }

/* 날짜 입력칸 (달력은 아래 .doje-dp) */
.doje-date { position: relative; max-width: 240px; }
.doje-fld__in .doje-date input { width: 100%; padding-right: 38px; cursor: pointer; }
.doje-date__ico {
    position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; opacity: .55;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23353130' stroke-width='1.3'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='2'/%3E%3Cpath d='M1.5 6.5h13M5 1v3M11 1v3'/%3E%3C/svg%3E");
}

/* Y/N 선택 (상단 노출 등) */
.doje-yn { display: inline-flex; padding: 3px; border: 1px solid var(--doje-line); border-radius: 10px; background: #faf8f5; }
.doje-yn label { position: relative; cursor: pointer; }
.doje-yn input { position: absolute; opacity: 0; pointer-events: none; }
.doje-yn span { display: block; padding: 7px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; color: #8a8178; transition: background .15s, color .15s; }
.doje-yn input:checked + span { background: #fff; color: #2b2724; box-shadow: 0 1px 3px rgba(42,38,36,.12); }
.doje-yn input[value=Y]:checked + span { background: #bc9171; color: #fff; }
.doje-yn input:focus-visible + span { outline: 2px solid #bc9171; outline-offset: 1px; }
.doje-write--adm .doje-yn { display: flex; }
.doje-write--adm .doje-yn label { flex: 1; text-align: center; }

/* 이미지 슬롯 - 누르거나 끌어놓아 올리고 바로 미리보기 */
.doje-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--doje-line); }
.doje-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.doje-slot__label { font-size: 14px; font-weight: 600; }
.doje-slot__label i { font-style: normal; color: #c8553d; }
.doje-slot__drop {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 5; overflow: hidden; cursor: pointer;
    border: 1.5px dashed #d6cfc7; border-radius: var(--doje-radius); background: #faf8f5;
    transition: border-color .15s, background .15s;
}
.doje-slot__drop:hover, .doje-slot__drop.is-over { border-color: #bc9171; background: #f5ede4; }
.doje-slot.has-img .doje-slot__drop { border-style: solid; border-color: var(--doje-line); }
.doje-slot__drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.doje-slot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.doje-slot__img[hidden] { display: none; }
.doje-slot__empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #a39a91; font-size: 12px; text-align: center; }
.doje-slot__empty b { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #e6e0d8; font-size: 20px; font-weight: 400; color: #bc9171; }
.doje-slot.has-img .doje-slot__empty { display: none; }
.doje-slot__change {
    position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 0; border-radius: 6px;
    background: rgba(42,38,36,.72); color: #fff; font-size: 12px; text-align: center; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.doje-slot.has-img .doje-slot__drop:hover .doje-slot__change { opacity: 1; }
.doje-slot.is-del .doje-slot__img { opacity: .25; filter: grayscale(1); }
.doje-slot__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #6f6760; }
.doje-slot__name:empty { display: none; }
.doje-slot__del { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #6f6760; cursor: pointer; }
.doje-slot .doje-fld__help { margin: 0; }
.doje-slot__size { font-size: 12px; font-weight: 600; }
.doje-slot__size:empty { display: none; }
.doje-slot__size.is-ok { color: #3c8a5a; }
.doje-slot__size.is-fix { color: #b0662e; }
.doje-slot .doje-fld__help b { color: #2b2724; }
/* 저장 크기가 정해진 슬롯은 그 비율로 미리 보여 준다 (9:16 이면 세로로 길어지므로 폭 제한) */
.doje-slot.has-size { max-width: 240px; }

/* 달력 (flatpickr 테마) ---------------------------------------------- */
.flatpickr-calendar.doje-dp {
    --dp-accent: #bc9171; --dp-accent-d: #94694b; --dp-soft: #f5ede4; --dp-fg: #2b2724; --dp-sub: #a39a91;
    width: 296px; padding: 12px 12px 10px; border: 1px solid #e6e0d8; border-radius: 14px;
    box-shadow: 0 16px 40px rgba(42,38,36,.16); font-family: inherit; background: #fff;
}
.flatpickr-calendar.doje-dp::before, .flatpickr-calendar.doje-dp::after { display: none; }
.doje-dp .flatpickr-months { align-items: center; padding: 0 2px 8px; }
.doje-dp .flatpickr-months .flatpickr-month { height: 34px; color: var(--dp-fg); }
.doje-dp .flatpickr-current-month { padding-top: 6px; font-size: 15px; font-weight: 700; }
.doje-dp .flatpickr-current-month { display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; gap: 6px; left: 0; width: 100%; }
.doje-dp .flatpickr-current-month span.cur-month { font-weight: 700; margin: 0; }
.doje-dp .flatpickr-current-month .numInputWrapper { width: auto; display: inline-flex; align-items: center; }
.doje-dp .flatpickr-current-month .numInputWrapper::after { content: "년"; font-weight: 700; }   /* "10월 2026" → "2026년 10월" */
.doje-dp .flatpickr-current-month input.cur-year { width: 3.1em; padding: 0; text-align: right; }
.doje-dp .flatpickr-current-month span.cur-month:hover, .doje-dp .numInputWrapper:hover { background: transparent; }
.doje-dp .flatpickr-current-month input.cur-year { font-weight: 700; }
.doje-dp .flatpickr-months .flatpickr-prev-month, .doje-dp .flatpickr-months .flatpickr-next-month {
    top: 12px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
    border-radius: 8px; color: var(--dp-fg);
}
.doje-dp .flatpickr-months .flatpickr-prev-month { left: 12px; }
.doje-dp .flatpickr-months .flatpickr-next-month { right: 12px; }
.doje-dp .flatpickr-months .flatpickr-prev-month:hover, .doje-dp .flatpickr-months .flatpickr-next-month:hover { background: var(--dp-soft); color: var(--dp-accent-d); }
.doje-dp .flatpickr-months .flatpickr-prev-month:hover svg, .doje-dp .flatpickr-months .flatpickr-next-month:hover svg { fill: none; }
.doje-dp .flatpickr-innerContainer, .doje-dp .flatpickr-rContainer, .doje-dp .flatpickr-days, .doje-dp .dayContainer { width: 270px; min-width: 270px; max-width: 270px; }
.doje-dp span.flatpickr-weekday { font-size: 12px; font-weight: 600; color: var(--dp-sub); }
.doje-dp span.flatpickr-weekday:first-child { color: #c8553d; }
.doje-dp span.flatpickr-weekday:last-child { color: #3f6fb5; }
.doje-dp .flatpickr-day {
    max-width: 38px; height: 36px; line-height: 34px; margin: 1px 0; border-radius: 10px;
    font-size: 13px; color: var(--dp-fg); border-color: transparent;
}
.doje-dp .dayContainer .flatpickr-day:nth-child(7n+1):not(.prevMonthDay):not(.nextMonthDay):not(.selected) { color: #c8553d; }
.doje-dp .dayContainer .flatpickr-day:nth-child(7n):not(.prevMonthDay):not(.nextMonthDay):not(.selected) { color: #3f6fb5; }
.doje-dp .flatpickr-day:hover, .doje-dp .flatpickr-day:focus { background: var(--dp-soft); border-color: transparent; }
.doje-dp .flatpickr-day.today { border-color: transparent; box-shadow: inset 0 0 0 1px var(--dp-accent); }
.doje-dp .flatpickr-day.today:hover { background: var(--dp-soft); color: var(--dp-fg); }
.doje-dp .flatpickr-day.selected, .doje-dp .flatpickr-day.selected:hover, .doje-dp .flatpickr-day.selected:focus {
    background: var(--dp-accent); border-color: var(--dp-accent); color: #fff; font-weight: 700; box-shadow: none;
}
.doje-dp .flatpickr-day.prevMonthDay, .doje-dp .flatpickr-day.nextMonthDay { color: #d4ccc4; }
.doje-dp .flatpickr-day.flatpickr-disabled, .doje-dp .flatpickr-day.flatpickr-disabled:hover { color: #ddd6cf; background: transparent; cursor: not-allowed; text-decoration: line-through; }
.doje-dp .numInputWrapper span { display: none; }

/* 관리자 화면 - 두 단 배치 --------------------------------------------- */
.doje-write--adm { max-width: 1400px; margin: 0; padding: 0; font-size: 14px; }
.doje-write--adm .doje-write__tit { display: none; }   /* 관리자 페이지 제목과 겹친다 */
.doje-wlay { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.doje-wlay--single { grid-template-columns: minmax(0, 420px); }
.doje-wcard { background: #fff; border: 1px solid var(--dj-line, #e6e0d8); border-radius: 14px; box-shadow: var(--dj-shadow, none); padding: 4px 20px 16px; }
.doje-wcard--sticky { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; }
.doje-wcard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -20px 4px; padding: 14px 20px; border-bottom: 1px solid var(--dj-line-2, #f0ebe5); }
.doje-wcard__head strong { font-size: 15px; }
.doje-write--adm .doje-write__btns { margin: 0; gap: 6px; }
.doje-write--adm .doje-write__btns .doje-btn { height: 36px; padding: 0 16px; font-size: 13px; border-radius: 8px; }
.doje-write--adm .doje-btn--primary { background: var(--dj-brand, #bc9171); border-color: var(--dj-brand, #bc9171); }
.doje-write--adm .doje-btn--primary:hover { background: var(--dj-brand-d, #94694b); border-color: var(--dj-brand-d, #94694b); opacity: 1; }

/* 항목: 라벨을 위로 올려 좁은 폭에서도 한눈에 */
.doje-write--adm .doje-fld { display: block; padding: 14px 0; border-bottom: 1px solid var(--dj-line-2, #f0ebe5); }
.doje-write--adm .doje-fld > label, .doje-write--adm .doje-fld > .doje-fld__label { display: block; padding: 0 0 7px; font-size: 12px; font-weight: 600; color: var(--dj-sub, #6f6760); }
.doje-write--adm .doje-fld__in input[type=text], .doje-write--adm .doje-fld__in select { height: 40px; padding: 0 12px; font-size: 14px; border-color: var(--dj-line, #e6e0d8); line-height: 38px; }
.doje-write--adm .doje-fld__in input:focus, .doje-write--adm .doje-fld__in select:focus { outline: 0; border-color: var(--dj-brand, #bc9171); box-shadow: 0 0 0 3px rgba(188,145,113,.18); }
.doje-write--adm .doje-fld--subject input[type=text] { height: 46px; font-size: 17px; font-weight: 600; }
.doje-write--adm .doje-fld--content { border-bottom: 0; padding-bottom: 0; }

/* 일자 두 개는 한 줄에 */
.doje-write--adm .doje-fldgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; border-bottom: 1px solid var(--dj-line-2, #f0ebe5); }
.doje-write--adm .doje-fldgroup .doje-fld { border-bottom: 0; }
.doje-write--adm .doje-fldgroup .doje-fld:only-child { grid-column: 1 / -1; }
.doje-write--adm .doje-date { max-width: none; }

/* 이미지 슬롯 - 패널 폭에 맞춰 두 칸 */
.doje-write--adm .doje-slots { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0 4px; border-bottom: 0; }
.doje-write--adm .doje-slots--1 { grid-template-columns: 1fr; }
.doje-write--adm .doje-slots--1 .doje-slot:not(.has-size) .doje-slot__drop { aspect-ratio: 16 / 10; }
.doje-write--adm .doje-slot__label { font-size: 12px; color: var(--dj-sub, #6f6760); }
.doje-write--adm .doje-slot .doje-fld__help { font-size: 11px; line-height: 1.5; color: var(--dj-mute, #a39a91); }

@media (max-width: 1280px) {
    .doje-wlay { grid-template-columns: 1fr; }
    .doje-wcard--sticky { position: static; max-height: none; }
    .doje-write--adm .doje-slots { grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); }
}

/* 댓글 */
.doje-cmt-wrap { margin-top: 46px; }
.doje-cmt-wrap h2 { margin: 0 0 16px; font-size: 18px; }
.doje-cmt-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--doje-line); }
.doje-cmt-item { padding: 18px 4px; border-bottom: 1px solid var(--doje-line); }
.doje-cmt-item__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--doje-fg-sub); }
.doje-cmt-item__head strong { color: var(--doje-fg); font-size: 14px; }
.doje-cmt-item__body { margin-top: 8px; font-size: 15px; line-height: 1.7; word-break: break-word; }
.doje-cmt-item.is-reply { padding-left: 30px; background: var(--doje-bg-soft); }
.doje-cmt-form { margin-top: 24px; padding: 18px; background: var(--doje-bg-soft); border-radius: var(--doje-radius); }
.doje-cmt-form textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--doje-line); border-radius: 8px; font-size: 15px; }
.doje-cmt-form__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; align-items: center; }

/* 반응형 */
@media (max-width: 1024px) {
    .doje-grid.cols-5, .doje-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .doje-grid { gap: 22px 12px; }
    .doje-grid.cols-3, .doje-grid.cols-4, .doje-grid.cols-5, .doje-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
    .doje-item__tit { font-size: 14px; }
    .doje-view__tit { font-size: 20px; }
    .doje-fld { display: block; }
    .doje-fld > label, .doje-fld > .doje-fld__label { padding: 0 0 6px; }
}
@media (max-width: 480px) {
    .doje-grid.cols-2, .doje-grid.cols-3, .doje-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .doje-top { flex-direction: column; align-items: stretch; }
}

/* ===== 댓글 (기본 스킨 스타일 계승) ===== */

#bo_v_share {position:relative;padding:20px 0}
#bo_v_share:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_share .btn {padding:0 10px;color:#555;font-weight:normal;font-size:1em;width:80px;line-height:35px;height:35px;border-color:#d5d5d5;border-radius:5px}
#bo_v_share .btn:hover {background:#fff}
#bo_v_share .btn i {margin-right:5px;color:#4b5259;vertical-align:middle}

/* 게시판 댓글 */
.cmt_btn {width:100%;text-align:left;border:0;border-bottom:1px solid #f0f0f0;background:#fff;font-weight:bold;margin:30px 0 0px;padding:0 0 15px}
.cmt_btn span.total {position:relative;display:inline-block;margin-right:5px;font-size:1em;color:#3a8afd}
.cmt_btn span.cmt_more {float:right;display:inline-block;width:15px;height:10px;background:url(./img/btn_cmt.png) no-repeat right 2px;margin-top:5px}
.cmt_btn_op span.cmt_more {background-position:right -8px}
.cmt_btn b {font-size:1.2em;color:#000}
.cmt_btn span.total:after {position:absolute;bottom:-17px;left:0;display:inline-block;background:#3a8afd;content:"";width:100%;height:2px}
#bo_vc {}
#bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc article {margin:20px 0;position:relative;border-bottom:1px solid #f0f0f0}
#bo_vc article:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc article .profile_img img {border-radius:50%}
#bo_vc article .pf_img {float:left;margin-right:10px}
#bo_vc article .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_vc article .cm_wrap {float:left;max-width:870px;width:90%}
#bo_vc header {position:relative;width:100%}
#bo_vc header:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc header .profile_img {display:none}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {color:#777}
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {line-height:1.8em;padding:0 0 20px}
#bo_vc p a {text-decoration:underline}
#bo_vc p a.s_cmt {text-decoration:underline;color:#ed6479}
#bo_vc_empty {margin:0;padding:80px 0 !important;color:#777;text-align:center}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc .bo_vl_opt {position:absolute;top:0;right:0}

.bo_vc_act {display:none;position:absolute;right:0;top:40px;width:58px;text-align:right;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999}
.bo_vc_act:before {content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.bo_vc_act:after {content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.bo_vc_act li {border-bottom:1px solid #f0f0f0}
.bo_vc_act li:last-child {border-bottom:0}
.bo_vc_act li a {display:inline-block;padding:10px 15px}
.bo_vc_act li a:hover {color:#3a8afd}

.bo_vc_w {position:relative;margin:10px 0;display:block}
.bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.bo_vc_w #char_cnt {display:block;margin:0 0 5px}
.bo_vc_w textarea {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;width:100%;height:120px;
-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1)}
#wr_secret {}
.bo_vc_w_info {margin:10px 0;float:left}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input {float:left;margin-right:5px}
.bo_vc_w_info #captcha {padding-top:10px;display:block;clear:both}
.bo_vc_w .btn_confirm {clear:both;margin-top:10px}
.bo_vc_w .btn_confirm label {display:inline-block;margin-right:10px;border-radius:3px;font-size:1.5em;text-align:center}
.bo_vc_w .btn_submit {height:45px;padding:0 20px;border-radius:3px;font-weight:bold;font-size:1.083em}
.bo_vc_w .btn_confirm .secret_cm label {font-size:1em !important}
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}
.secret_cm {display:inline-block;float:left}

#bo_vc_send_sns {display:inline-block;float:left}
#bo_vc_sns {display:inline-block;margin:0;padding:0;list-style:none;zoom:1}
#bo_vc_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc_sns li {float:left;margin:0 5px 0 0}
#bo_vc_sns .sns_li_f {border-radius:3px;background:#3a589b;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_t {border-radius:3px;background:#00aced;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_off {background:#bbb}
#bo_vc_sns a {display:inline-block;padding:0 15px 0 5px}
#bo_vc_sns input {margin:0 5px 0 0}


/* ===== 쓰기 폼 - 첨부 슬롯 현재 이미지 ===== */
.doje-filenow { margin-top: 10px; }
.doje-filenow img { display:block; max-width:220px; max-height:160px; border:1px solid var(--doje-line); border-radius:6px; object-fit:contain; background:#fafafa; }
.doje-filenow label { display:inline-block; margin-top:6px; font-size:13px; }
