@charset "UTF-8"; 

/* ── 게시판 리스트 - 목록형 ──────────────────────────────────────── */
.board-list-basic table {width: 100%;border-spacing: 0;border-collapse: separate;table-layout: fixed;border-top: 2px solid #17945E;} 
.board-list-basic table thead tr:last-child > * {border-bottom: 1px solid #17945E;} 
.board-list-basic table tbody tr:hover, .board-list-basic table tbody tr:focus { background-color: #f9fbfc; } 
.board-list-basic table th,
.board-list-basic table td { border-bottom: 1px solid #dedede; box-sizing: border-box; padding: 12px 20px; font-weight: 400; letter-spacing: -.038rem; text-align: center; } 
.board-list-basic table th {background-color: #f3fcfa;border-bottom: 0;color: #121212;font-size: 18px;font-weight: 600;position: relative;} 

.board-list-basic table td { font-size: 18px; } 
.board-list-basic table tbody td.title { color: #191919; font-weight: 500; } 
.board-list-basic table tbody td.title > a { display: inline-block; color: #191919; font-weight: 500; vertical-align: middle; width: auto; max-width: 88%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.board-list-basic table tbody tr:hover td.title > a, 
.board-list-basic table tbody tr:focus td.title > a { text-decoration: underline; } 
.board-list-basic table tbody tr.row-notice th,
.board-list-basic table tbody tr.row-notice td,
.board-list-basic table tbody tr.row-notice td a { color: #17945E; font-weight: 600; } 
.board-list-basic table tbody tr.row-notice td {background: #f4fffa;}

@media all and (max-width:1199px) {
 .board-list-basic table th, 
 .board-list-basic table td { font-size: 100%; } 
.board-list-basic table colgroup { display: none; } 
.board-list-basic table tbody tr:not(.report-detail-row) { display: flex; flex-wrap: wrap; border-bottom: 1px solid #dedede; padding: 10px 0; position: relative; } 
.board-list-basic table th { display: none; } 
.board-list-basic table td { display: inline-flex; align-items: flex-start; border-bottom: 0; text-align: left; font-size: .9rem; padding: 0; } 
.board-list-basic table tbody td:not(.title) { order: 1; } 
.board-list-basic table tbody td.m-hidden { display: none; font-size: .8rem; width: 40px; } 
.board-list-basic table tbody td.title { order: 0; width: 100%; margin: 3px 0 7px; font-size: 1.1rem; font-weight: 600; } 
.board-list-basic table tbody td.flctn { min-width: 50%; box-sizing: border-box; margin-bottom: 3px; padding-right: 10px; } 
.board-list-basic table tbody td.full { min-width: 100%; } 
.board-list-basic table tbody td.flctn:before { content: attr(data-name); background: #eee; color: #767676; margin-right: 5px; padding: 1px 5px; } 
.board-list-basic table tbody td.ntc { order: 0; width: fit-content; margin: 3px 0 7px; font-size: 1.1rem; font-weight: 600; } 
.board-list-basic table tbody td.ntc:nth-child(1) {margin-right: 5px;padding: 0 5px;background: #17945e;color: #fff;font-size: 0.875rem;position: relative;} 
.board-list-basic table tbody td:last-child { margin-right: 0; padding-right: 0; } 
.board-list-basic table tbody td:not(.flctn):last-child:before { display: none; } 
.board-list-basic table tbody td:not([class], :last-child) { padding-right: 7px; margin-right: 7px; position: relative; } 
.board-list-basic table tbody td:not([class], :last-child):after { content:''; display: block; width: 1px; height: 70%; background: #b6b6b6; position: absolute; right:0; top:0; bottom:0; margin:auto; } 
.board-list-basic table tbody tr.report-detail-row td {display: block;}
 .board-list-basic table tbody td.board-empty,
  .board-list-basic table tbody td.board-empty-cell{border:none;border-radius: 0;box-shadow: none;font-size: 1rem;color: #999;padding: 28px;}
}

 /* ────────────────────────────────────────
* 02 게시판 리스트 - 갤러리형
 * ──────────────────────────────────────── */
.board-list-gallery ul { display: flex; flex-wrap: wrap; gap: 15px; } 
.board-list-gallery ul > li { width: calc((100% / 3) - 10px); } 
.board-list-gallery ul > li:nth-child(3n) { margin-right: 0; } 
.board-list-gallery ul > li a { display: block; border: 1px solid #ccc; border-radius: 15px; overflow: hidden; transition: all .3s; } 
.board-list-gallery ul > li a:hover { box-shadow: 0px 0px 20px rgba(0,0,0,.2); } 
.board-list-gallery .img { aspect-ratio: 1 / .7; background: #f5f5f5; } 
.board-list-gallery .cont { padding: 15px 20px } 
.board-list-gallery .cont .tit { font-size: 1.375rem; font-weight: 600; color: #121212; } 
.board-list-gallery .cont .txt { font-size: 1.1rem; margin-bottom: 10px; } 
.board-list-gallery .cont .date { color: #666; } 

@media all and (max-width: 768px) {.board-list-gallery ul { justify-content: space-between } 
.board-list-gallery ul > li { width: calc(50% - 10px); margin-right: 0; } 
 }
@media all and (max-width: 480px) {.board-list-gallery ul > li { width: 100% } 
 }

 /* ────────────────────────────────────────
* 03 게시판 상세
 * ──────────────────────────────────────── */
/* 이벤트 갤러리 상세 — 응모작 사진 한 장을 주인공으로 보여주는 레이아웃.
   제목 박스를 위에 두던 일반 게시판 배치 대신 이미지를 맨 위로 올리고 제목·정보를 아래에 둔다. */
.photo-view { padding-top: 8px; }
.photo-view .photo-head { padding: 26px 4px 20px; border-bottom: 1px solid #E9ECF1; text-align: center; }
.photo-view .photo-title { font-size: 1.75rem; font-weight: 700; line-height: 1.35; word-break: keep-all; margin: 0 0 14px; }
.photo-view .photo-title .badge-notice { color: #1c6c50; font-size: 1rem; vertical-align: middle; margin-right: 6px; }
.photo-view .photo-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; color: #6B7178; font-size: .9375rem; }
.photo-view .photo-meta li { display: inline-flex; align-items: center; gap: 6px; }
/* 항목 사이 구분선. 줄바꿈될 수 있어 절대배치 대신 가상요소를 흐름 안에 둔다. */
.photo-view .photo-meta li + li::before { content: ''; display: block; width: 1px; height: 13px; background: #D6E0EB; margin: 0 14px; }
.photo-view .photo-meta .tit { font-weight: 600; color: #4A5158; }
.photo-view .photo-meta .txt { color: #222; }
.photo-view .photo-desc { padding: 32px 4px; text-align: left; line-height: 1.8; word-break: keep-all; white-space: pre-line; }
@media all and (max-width: 768px) {
  .photo-view .photo-title { font-size: 1.375rem; }
  .photo-view .photo-meta { font-size: .875rem; }
  .photo-view .photo-meta li + li::before { margin: 0 10px; }
  .photo-view .photo-desc { padding: 24px 2px; }
}
.board-view .file { display: flex; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.board-view .file .tit { font-weight: 600; padding: 20px 30px; background: #f5f5f5; } 
.board-view .file ul { padding: 20px } 
.view-pager { margin-top: 30px; border: 1px solid #dedede; border-radius: 0; overflow: hidden; } 
.view-pager li { padding: 10px 23px; transition: .3s; font-weight: 400; display:flex; } 
.view-pager span { display: flex; align-items:center; color: #838383 } 
.view-pager span::after { content:''; display:block; width:1px; height:16px; background:#b6b6b6; margin-left:10px } 
.view-pager a { margin-left: 10px; transition: .3s; } 
.view-pager a:hover { text-decoration:underline } 
.view-pager li:nth-child(2) { border-top: 1px solid #dedede; } 

/* ******************* *
* comment
* ******************* */

.board-comments {margin-bottom: 30px;} 
.board-comments > h3 {padding: 10px 5px 0;border-top: 1px solid #ddd;}
.comment-title { font-size: 1.1111rem; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; } 
.comment-form {display: flex;gap: 10px;flex-wrap: wrap;margin-top: 10px;} 
.comment-form textarea {width: calc(100% - 130px);margin-right: auto;height: 45px;padding: 10px;border-radius: 6px;} 
.comment-form .comment-content {width: 100%;}
.comment-form button {width: 110px;height: 45px;background: #007d64;color: #fff;display:flex;align-items:center;justify-content:center;border-radius: 6px;border: none;} 
.comment-list {padding: 15px;border-bottom: 1px dashed #e0e0e0;display: flex;flex-direction: column;gap: 20px;} 
.comment-list .name { font-weight: 600; font-size: 1.111rem; } 
.comment-list .date { color: #767676; font-size: .889rem; margin-left: auto } 
.comment-list .btn-link {border-radius: 5px;background: #dd4848;padding: 3px 10px;color: #fff;border: none;font-size: .8rem;} 
@media all and (max-width: 768px){
 .comm-list { padding: 10px 5px; } 
}


/* ────────────────────────────────────────
* 04 게시판 작성
 * ──────────────────────────────────────── */

.req-txt { text-align: right; margin-bottom: 5px; } 
.req { color: red; font-size: .8rem; vertical-align: text-top; margin-left: 3px; } 
.board-write { display: flex; border-top: 3px solid #2563EB; flex-wrap: wrap; } 
.board-write label:not(.tit) { cursor: pointer; } 
/* input/select 톤은 /places 의 .search-area .search-cont 와 동일하게 통일.
 border: #58616A, radius: 4px, height: 48px, padding: 5px 16px, placeholder: #878787 */
.board-write input[type="text"],
.board-write input[type="tel"],
.board-write input[type="url"],
.board-write input[type="email"],
.board-write input[type="number"],
.board-write input[type="password"],
.board-write input[type="search"],
.board-write .select-wrap,
.board-write textarea { border: 1px solid #afb2b5; border-radius: 4px; background: #fff; font-weight: normal; line-height: 1.4; color: #1E2124; font-family: inherit; } 
.board-write input[type="text"],
.board-write input[type="tel"],
.board-write input[type="url"],
.board-write input[type="email"],
.board-write input[type="number"],
.board-write input[type="password"],
.board-write input[type="search"] { min-height: 48px; width: 100%; max-width: 480px; padding: 5px 16px; font-size: 16px; } 
.board-write input::placeholder,
.board-write textarea::placeholder { color: #878787; font-size: .95rem; } 
.board-write textarea { min-height: 160px; width: 100%; padding: 14px 16px; resize: vertical; overflow-y: auto; margin: 20px 0; font-size: 16px; } 
.board-write .select-wrap { min-width: 240px; height: 48px; cursor: pointer; position: relative; overflow: hidden; width: fit-content; } 
.board-write .select-wrap select { width: 100%; height: 100%; border: 0; padding: 5px 38px 5px 16px; background: transparent; font-size: 16px; color: #1E2124; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } 
.board-write .select-wrap::after { content: ''; display: block; border: 1px solid transparent; border-bottom-color: #33363D; border-right-color: #33363D; transform: rotate(45deg) translateY(-25%); width: 7px; height: 7px; position: absolute; top: 0; bottom: 0; right: 15px; margin: auto; transition: 0.35s; z-index: 0; cursor: default; } 
.board-write input:focus,
.board-write textarea:focus,
.board-write .select-wrap:focus-within { outline: 0; border-color: #087C72; box-shadow: 0 0 0 3px rgba(8, 124, 114, 0.12); } 
.board-write .date-wrap { display: flex; align-items: center; gap: 5px; } 
.board-write input.datepicker { width: 200px; background: url(' ../images/common/ico_calendar.png') no-repeat center right 10px } 
.board-write input.src-time { width: 100px; } 
.board-write > div { display: flex; align-items: center; border-bottom: 1px solid #e2ebff; min-height: 85px; align-content: center; flex-direction: row; gap: 12px; width: 100%; } 
.board-write div .tit { min-width: 196px; font-weight: 600; font-size: 18px; background: #f0f5ff; height: 100%; vertical-align: middle; z-index: 0; display: flex; align-content: center; flex-direction: row; flex-wrap: wrap; justify-content: center; } 
.board-write div .cont { width: calc(100% - 196px); display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } 
.board-write div input[type="file"] { position:absolute; font-size: 0; width:0; height:0 } 
.board-write .file-wrap label { background: #fb513d1f; padding: 3px 10px; border-radius: 5px; margin-right: 10px } 
.board-write .file-wrap span { font-size: .889rem; color: #666 } 

.listing-form-intro { color: #555; font-size: 15px; margin: 4px 0 24px; } 
.board-write .form-group { width: 100%; } 
.board-write .form-group.align-top { align-items: flex-start; min-height: auto; padding: 18px 0; } 
.board-write .tit .required { color: #d33; margin-left: 4px; } 
.board-write input[type="text"].wide,
.board-write input[type="url"].wide,
.board-write input[type="tel"].wide { max-width: 640px; } 
.board-write input[type="text"].coord { max-width: 200px; width: 200px; } 
.board-write .form-hint { color: #909090; font-size: 13px; align-self: center; } 
.board-write  .address-pick {display: flex;gap: 5px;width: 100%;}
.board-write  .address-pick > button {flex-shrink: 0;}
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; } 
.chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #d3dbe2; border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; color: #555; user-select: none; transition: background .15s, border-color .15s, color .15s; } 
.chip-check:hover { border-color: #087C72; color: #087C72; } 
.chip-check input[type="checkbox"] { margin: 0; accent-color: #087C72; } 
.chip-check.checked { background: rgba(8, 124, 114, 0.10); border-color: #087C72; color: #066055; font-weight: 700; } 

.tag-input-wrap { flex: 1; min-width: 200px; max-width: 640px; display: flex; flex-wrap: wrap; align-items: center; transition: border-color .15s, box-shadow .15s; } 
.tag-input-wrap:focus-within { border-color: #087C72; box-shadow: 0 0 0 3px rgba(8, 124, 114, 0.12); } 
.tag-input-wrap input { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent; font-size: 14px; color: #222; font-family: inherit; } 
.tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: rgba(8, 124, 114, 0.10); color: #066055; border-radius: 999px; font-size: 13px; font-weight: 600; } 
.tag-chip button { background: transparent; border: 0; color: #066055; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; font-family: inherit; } 

/* 이미지 업로드 (대표 이미지 + 추가 사진 갤러리) */
.image-pick {display: flex;gap: 12px;align-items: center;justify-content: flex-start;flex-wrap: wrap;} 
.image-upload-btn {cursor: pointer;} 

.image-preview-single { position: relative; width: 180px; height: 135px; border-radius: 8px; overflow: hidden; border: 1px solid #e3e8ee; background: #f5f7fa; } 
.image-preview-single[hidden] { display: none; } 
.image-preview-single img { width: 100%; height: 100%; object-fit: cover; display: block; } 

.image-gallery { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; min-height: 8px; } 
.image-thumb { position: relative; width: 120px; height: 90px; border-radius: 8px; overflow: hidden; border: 1px solid #e3e8ee; background: #f5f7fa; cursor: grab; transition: box-shadow .15s, transform .1s; } 
.image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } 
.image-thumb.dragging { opacity: 0.4; cursor: grabbing; } 
.image-thumb.drop-target { box-shadow: 0 0 0 2px #087C72; } 

.image-remove-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } 
.image-remove-btn:hover { background: #d33; } 

@media all and (max-width: 1024px){
 .board-write div .tit { min-width: 150px; } 
.board-write input[type="text"].datepicker { width: 60% } 
.board-write input[type="text"].src-time { width: calc(40% - 10px); } 
 }
@media all and (max-width: 768px){
 .board-write { display: block; } 
 .board-write > div:not(.cbtn-wrap) { display: block; padding-bottom: 30px; border-bottom: none; } 
.board-write div .cont { width: 100%; } 
 .board-write input[type="text"],
 .board-write .select-wrap,
 .board-write textarea { width: 100%; } 
 .board-write .select-wrap, .board-write input[type="text"], .board-write input[type="tel"], .board-write input[type="url"], .board-write input[type="email"], .board-write input[type="number"], .board-write input[type="password"], .board-write input[type="search"] {min-height: 40px;height: 40px;} 
.board-write textarea { margin: 0 } 
 .board-write div .tit { text-align:left; display: block; margin-bottom: 15px; width: 100%; padding: 12px 10px; border-radius: 0; align-items: flex-start; height: auto; color: var(--color1); font-weight: bold; font-size: 16px; } 
 .board-write div .txt { padding-left: 10px; } 
 }
.crop-modal[hidden] { display: none; }
.crop-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.crop-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.crop-modal-inner { position: relative; z-index: 1; background: #fff; border-radius: 12px; width: min(90vw, 720px); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0,0,0,0.25); overflow: hidden; }
.crop-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #E9ECF1; }
.crop-modal-header h4 { margin: 0; font-size: 16px; color: #2D2D2D; }
.crop-modal-close { width: 32px; height: 32px; border: 0; background: transparent; font-size: 1.375rem; color: #6B7178; cursor: pointer; border-radius: 6px; }
.crop-modal-close:hover { background: #F2F4F7; }
.crop-modal-body { padding: 16px; overflow: auto; }
.crop-image-wrap { max-height: 60vh; }
.crop-image-wrap img { display: block; max-width: 100%; }
.crop-modal-hint { margin: 10px 0 0; font-size: 12px; color: #6B7178; }
.crop-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #E9ECF1; }

/* ── 이벤트 게시판 갤러리 ─────────────────────────────────────────
   그리드/카드/좋아요 버튼 기본형은 sub.css 의 .tour-grid, .tour-item,
   .like-btn-overlay 를 그대로 재사용하고, 여기서는 게시판 전용 보정만 둔다. */
/* 이벤트 갤러리 썸네일은 4:3. 공통 .tour-item-thumb(sub.css) 의 1/.914 를 덮어쓴다. */
.board-gallery .tour-item-thumb { aspect-ratio: 4 / 3; }
/* 한 줄에 3개. sub.css 는 기본 4열이고 1199px 이하부터 3열 → 640px 이하 2열로 내려간다.
   그 반응형 단계를 살리려고 기본(1200px 이상) 구간만 덮어쓴다.
   미디어쿼리 없이 덮어쓰면 셀렉터 우선순위가 높아져 모바일에서도 3열로 굳는다. */
@media all and (min-width: 1200px) {
  .board-gallery { grid-template-columns: repeat(3, 1fr); }
}
.board-gallery .tour-item-body { padding-top: 7px; }
.board-gallery .tour-item-body .title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; word-break: keep-all; }
/* 득표수 · 휴대폰 뒤 4자리 · 조회수를 제목 아래 한 줄에 모은다.
   득표는 왼쪽에 강조, 부가 정보는 오른쪽으로 밀어 카드 높이를 한 줄 줄인다. */
.board-gallery .card-meta-row { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.board-gallery .card-meta-row .course-card-meta { margin-top: 0; }
/* 투표 갤러리라 카드에서 득표수가 제목 다음으로 먼저 읽혀야 한다.
   숫자는 likes.js 가 textContent 로 갈아끼우므로 '표' 단위는 ::after 로 붙인다(덮어써지지 않는다). */
.board-gallery .like-count { flex-shrink: 0; font-size: 1.125rem; font-weight: 700; color: #E8384F; }
.board-gallery .like-count::after { content: '표'; font-size: 0.8125rem; font-weight: 600; color: #6B7178; }
.board-gallery .tour-item-thumb .no-image { display: flex; align-items: center; justify-content: center; background: #F2F4F7; color: #8A9099; font-size: 0.875rem; }
/* 공지글은 카드 썸네일 테두리로 구분. */
.board-gallery .tour-item.is-notice .tour-item-thumb { outline: 2px solid var(--color1, #087C72); outline-offset: -2px; }

/* 상세 화면 대표이미지 + 좋아요 */
/* 응모작 이미지 무대.
   가로/세로 비율이 제각각인 사진이 들어오므로 폭을 100% 로 늘리지 않고 contain 으로 담는다.
   (예전 규칙은 width:100% 라 세로 사진이 화면을 몇 배로 넘겨 스크롤을 잡아먹었다)
   남는 여백은 배경으로 채워 어떤 비율이든 같은 크기의 무대 안에 놓이게 한다. */
.view-thumb { display: flex; align-items: center; justify-content: center;
              box-sizing: border-box; width: 100%; max-width: 900px;
              margin: 20px auto 0; padding: 16px;
              aspect-ratio: 4 / 3;
              background: #F4F6F7; border: 1px solid #E9ECF1; border-radius: 20px; }
/* 사진 자체는 잘라내지 않는다(contain). 4:3 이 아닌 사진은 남는 쪽을 배경이 채운다.
   꽉 채워 자르려면 이 줄을 max-width/height:100% + width/height:100% + cover 로 바꾸면 된다. */
.view-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
                  object-fit: contain; border-radius: 12px; }
.view-thumb-empty { margin: 0; color: #8A9299; font-size: .9375rem; }
@media all and (max-width: 768px) {
  .view-thumb { padding: 10px; border-radius: 14px; }
}
/* ── 사진 투표 패널 (상세) ─────────────────────────────────────
   좋아요가 곧 '한 표' 라서, 득표수와 투표 여부가 사진 다음으로 먼저 읽히도록 세운다. */
.view-like { display: flex; justify-content: center; margin: 28px 0 8px; }
.vote-panel { flex-direction: column; align-items: center; gap: 12px; margin: 32px 0 8px; }
.vote-count { display: flex; align-items: baseline; gap: 5px; margin: 0; }
/* 득표 숫자는 likes.js 가 textContent 로 갈아끼운다. 하트 아이콘은 버튼 쪽에만 두려고 ::before 를 끈다. */
.vote-panel .like-count { font-size: 2.5rem; font-weight: 800; line-height: 1; color: #E8384F; }
.vote-panel .like-count::before { display: none; }
.vote-count-unit { font-size: 1rem; font-weight: 600; color: #6B7178; }

/* 투표 버튼. 하트 아이콘(ico_like_off/on.png)이 흰 배경 기준이라 배경은 흰색을 유지하고
   테두리·글자색으로 강조한다. */
.view-like .vote-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 220px; height: 56px; padding: 0 30px;
    background: #fff; border: 2px solid #E8384F; border-radius: 1000px;
    color: #E8384F; font-size: 1.0625rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 16px rgba(232, 56, 79, 0.18); transition: background .15s, box-shadow .15s; }
.view-like .vote-btn:hover { background: #FFF2F4; }
.view-like .vote-btn.liked { background: #FFF2F4; }
/* 상태별 문구를 CSS 로 바꿔 끼운다. likes.js 는 .liked 만 토글하면 되고 문구는 몰라도 된다. */
.vote-label::before { content: '이 사진에 투표하기'; }
.vote-btn.liked .vote-label::before { content: '투표 완료'; }
.view-like .vote-btn[disabled] { opacity: 1; background: #F2F4F7; border-color: #D6DBE0;
    color: #8A9299; box-shadow: none; cursor: not-allowed; }
.vote-btn[disabled] .vote-label::before { content: '투표 기간이 아닙니다'; }
.vote-note { margin: 0; color: #6B7178; font-size: 0.9375rem; text-align: center; word-break: keep-all; }
@media all and (max-width: 768px) {
  .vote-panel .like-count { font-size: 2rem; }
  .view-like .vote-btn { min-width: 190px; height: 50px; font-size: 1rem; }
  .vote-note { font-size: 0.875rem; }
}

/* 이벤트 종료 후 좋아요 순위 뱃지 + 수상작 테두리 (상위 3건)
   등수 색(금/은/동)은 뱃지와 카드 테두리가 같은 값을 쓰도록 CSS 변수로 한 곳에서 정한다. */
.tour-item.is-ranked { position: relative; }
/* 순위별 메달 색. 뱃지 배경과 카드 링이 같은 값을 쓰도록 여기서 한 번만 정한다. */
.tour-item.is-rank-1 { --rank-color: #E6BE3C; --rank-glow: rgba(230, 190, 60,0.16); }  /* 금 */
.tour-item.is-rank-2 { --rank-color: #8E9199; --rank-glow: rgba(142, 145, 153, 0.16); } /* 은 */
.tour-item.is-rank-3 { --rank-color: #B06E3B; --rank-glow: rgba(176, 110, 59, 0.16); }  /* 동 */

/* 시상대 액자는 하나뿐이라 카드끼리는 썸네일 링으로 금·은·동을 구분한다.
   카드마다 테두리를 두르면 액자가 여러 겹으로 보여서 링(outline)만 쓴다. */
/* 수상작 썸네일만 살짝 띄워 일반 카드와 층을 나눈다.
   링 색과 섞여 탁해지지 않도록 색은 중립으로 두고 농도만 약하게 준다.
   .tour-item-thumb 의 overflow:hidden 은 자기 바깥으로 나가는 그림자에는 영향을 주지 않고,
   부모 .tour-item 도 overflow 가 열려 있어 잘리지 않는다. */
.board-gallery .tour-item.is-ranked .tour-item-thumb {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

/* 테두리에도 광택을 흘려야 해서 outline 대신 ::after 로 링을 그린다.
   mask 두 장을 exclude 로 겹쳐 안쪽을 도려내면 padding 두께(3px)만 남아 테두리가 된다.
   그래야 배경 그라데이션이 사진을 덮지 않고 테두리 위로만 지나간다.
   (::before 는 sub.css 의 hover 이미지가 쓰고 있어 ::after 를 쓴다) */
.board-gallery .tour-item.is-ranked .tour-item-thumb::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    padding: 3px; border-radius: inherit;
    background: linear-gradient(115deg,
        var(--rank-color, #E6BE3C) 0%,   var(--rank-color, #E6BE3C) 40%,
        rgba(255, 255, 255, 0.95) 50%,
        var(--rank-color, #E6BE3C) 60%,  var(--rank-color, #E6BE3C) 100%);
    /* repeat(기본값)을 그대로 둬야 한다. no-repeat 으로 하면 배경이 밀려난 쪽 테두리에
       배경이 없어 링 색이 통째로 사라진다. 반복이 빈 구간을 메워 준다.
       광택이 몇 번 지나가는지는 반복 여부가 아니라 '한 주기에 배경이 몇 타일만큼
       움직이는가' 로 정해진다 — 아래 ring-shine 참고. */
    background-size: 200% 100%;
    /* 테두리 전용 타이밍. 뱃지(rank-shine)와 별개라 여기만 바꿔도 뱃지는 그대로다. */
    animation: ring-shine 2.8s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
}
/* 뱃지·왕관과 같은 2.8초 주기. 저쪽은 transform 으로 훑지만 테두리는 도형이 링이라
   배경 위치를 움직이는 방식이어야 모서리를 따라 자연스럽게 흐른다.

   한 주기에 배경이 움직이는 거리 = (요소폭 - 배경폭) × 위치변화량.
   배경폭 200% 기준으로 100% → -100% 면 이동 거리가 정확히 배경 한 장(200%) 이라
   하이라이트가 딱 한 번 지나가고 끝점이 시작점과 같아 이음매 없이 반복된다.
   이 값을 키우면 한 주기에 여러 번 지나가는 것처럼 보인다.
   끝에서 멈칫하지 않도록 timing 은 linear 를 쓴다. */
/* ── 테두리 광택 전용 (뱃지·왕관과 독립) ────────────────────────────
   .board-gallery .tour-item.is-ranked .tour-item-thumb::after 만 이걸 쓴다.
   뱃지 쪽 rank-shine 과 주기·이징을 맞출 필요가 없다. 따로 조절해도 서로 영향이 없다.

   한 주기에 배경이 움직이는 거리 = (요소폭 - 배경폭) × 위치변화량.
   배경폭 200% 기준 100% → -100% 면 이동 거리가 정확히 배경 한 장(200%) 이라
   하이라이트가 한 번만 지나가고, 끝점이 시작점과 같아 이음매 없이 이어진다.
   이 폭을 키우면 한 주기에 여러 번 지나가는 것처럼 보인다. */
@keyframes ring-shine {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── 뱃지·왕관 광택 전용 (테두리와 독립) ────────────────────────────
   .rank-badge::after 와 .rank-crown::after 만 이걸 쓴다.
   사선 하이라이트가 요소 위를 훑고 지나가며, 양 끝에서는 opacity 로 사라진다.
   위 ring-shine 과는 별개라 주기·이징을 따로 조절해도 서로 영향이 없다.
   사진(썸네일)에는 걸지 않는다. */
@keyframes rank-shine {
    0%   { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
    12%  { opacity: 0.8; }
    42%  { opacity: 0.8; }
    100% { transform: translateX(260%) skewX(-18deg); opacity: 0; }
}

/* 움직임을 줄이도록 설정한 사용자에게는 애니메이션을 끈다(금색·링은 그대로 유지).
   왕관·뱃지 모두 광택은 ::after 가 담당하므로 그쪽만 멈추면 된다. */
@media (prefers-reduced-motion: reduce) {
    .rank-badge::after,
    .rank-crown::after { animation: none; opacity: 0; }
    /* 테두리는 사라지면 안 되므로 흐르는 그라데이션 대신 단색으로 고정한다. */
    .board-gallery .tour-item.is-ranked .tour-item-thumb::after {
        animation: none; background: var(--rank-color, #E6BE3C);
    }
}

/* 상위 3개는 카드마다 테두리를 두르지 않고 수상작 구역 하나로 묶는다.
   카드별 테두리는 3개가 따로 노는 것처럼 보여서 한 액자 안에 나란히 세우는 편이 낫다.
   padding-top 44px 은 금상 왕관이 카드 위로 솟는 자리다. 줄이면 왕관이 테두리를 넘는다
   (.rank-crown 의 top: -44px 과 짝을 이룬다). */
.rank-podium {
    position: relative;
    /* 아래 margin 은 시상대와 일반 목록을 끊어 주는 간격이다
       (그 아래 .tour-grid 의 margin-top 16px 이 더해진다). */
    margin: 26px 0 100px;
    /* padding-bottom 이 0 이어야 단상이 액자 바닥선을 딛고 선 것처럼 보인다. */
    /* padding-top 은 금상 왕관이 카드 위로 솟는 자리다.
       .rank-crown 의 top(-64px) 보다 커야 왕관이 액자 테두리를 넘지 않는다. */
    padding: 76px 20px 0;
    background: linear-gradient(180deg, #FFFBF0 0%, #FFFFFF 62%);
    border: 2px solid #E6BE3C;
    border-radius: 20px;
    box-shadow: 0 0 0 4px rgba(230, 190, 60,0.14), 0 10px 26px rgba(0, 0, 0, 0.06);
}
/* 메달 수여식 시상대 배치. 금상이 가운데에서 가장 높고 은상·동상이 좌우로 낮아진다.
   문서 순서는 금→은→동 이지만 grid-column 으로 자리를 지정해 은·금·동 순으로 세운다
   (카드마다 금상/은상/동상 뱃지가 붙어 있어 시각 순서가 달라도 혼동되지 않는다).
   썸네일이 4:3 이라 폭이 곧 높이라서 열 너비만으로 단이 만들어지고,
   align-items:end 로 아래를 맞춰야 시상대처럼 위쪽 선이 층지게 된다.
   .tour-grid(sub.css) 의 열 수를 덮어쓴다.
                   ┌─────────────┐
   ┌─────────┐     │   👑 금상   │     ┌──────┐
   │  은상   │     │             │     │ 동상 │
   └─────────┘     └─────────────┘     └──────┘ */
.board-gallery.rank-podium-grid {
    /* 열 너비가 곧 카드 크기다(썸네일이 4:3 이라 폭이 높이를 정한다).
       가운데 금상이 가장 크고 은상 → 동상 순으로 작아진다.
       3열 고정이라 어떤 폭에서도 줄바꿈되지 않는다.
       column-gap 을 명시하는 이유: 단상이 이 값의 절반씩 음수 마진으로 파고들어
       서로 맞닿아야 하는데, .tour-grid 의 기본 gap 은 화면 폭마다 달라 계산이 안 선다. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
    align-items: end;
    column-gap: 16px;
}
/* grid-row 를 반드시 함께 지정한다.
   문서 순서가 금(2열) → 은(1열) → 동(3열) 이라 열만 지정하면, 자동 배치 커서가
   되돌아가지 못해 은상이 새 행으로 밀려난다(= 줄바꿈). 행을 못 박아야 한 줄에 선다.
   z-index 는 겹칠 때의 앞뒤 순서 — 금상이 항상 맨 앞이다. */
.board-gallery.rank-podium-grid .is-rank-2 { grid-column: 1; grid-row: 1; z-index: 1; }
.board-gallery.rank-podium-grid .is-rank-1 { grid-column: 2; grid-row: 1; z-index: 3; }
.board-gallery.rank-podium-grid .is-rank-3 { grid-column: 3; grid-row: 1; z-index: 2; }

/* 카드 아래에 붙는 단상. 카드 크기는 셋 다 같고 단상 높이만 달라서,
   align-items:end 로 아래를 맞추면 단이 높은 금상 카드가 그만큼 위로 올라간다.
   좌우 -8px 은 column-gap(16px) 의 절반이다. 이만큼 넓혀야 옆 단상과 맞닿아
   금상 단상과 한 줄로 이어진 시상대가 된다.
   별도 마크업 없이 li 의 ::after 로 세운다(.tour-item 은 ::after 를 쓰지 않는다). */
.board-gallery.rank-podium-grid .tour-item::after {
    content: ''; display: block; margin: 16px -8px 0;
    /* 단상은 셋 다 같은 단색. 등수 구분은 왕관·뱃지·테두리가 이미 하고 있어서
       단상까지 색을 나누면 산만해진다. 명암(그라데이션·내부 그림자)도 넣지 않는다. */
    background: #CFC8B8;
}
.board-gallery.rank-podium-grid .is-rank-1::after { height: 88px; }
.board-gallery.rank-podium-grid .is-rank-2::after { height: 58px; }
.board-gallery.rank-podium-grid .is-rank-3::after { height: 34px; }

/* 모바일은 3열 시상대를 포기하고 배치를 바꾼다.
   3열을 유지하면 폰(390px)에서 동상 사진이 89×67px 까지 줄어 알아볼 수 없고,
   겹침을 주면 겹치는 쪽 뱃지·하트가 금상 카드에 가려져 계속 보정이 필요했다.
   금상을 한 줄 전체로 올리고 은·동상을 아래 절반씩 두면
   세 사진 모두 읽히면서 '금상이 주인공' 이라는 위상도 그대로 남는다.

   ┌──────────────┐
   │   👑 금상    │   ← 1행 전체 폭
   └──────────────┘
   ┌──────┐┌──────┐
   │ 은상 ││ 동상 │   ← 2행 절반씩
   └──────┘└──────┘ */
@media (max-width: 768px) {
    .board-gallery.rank-podium-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 15px;
        align-items: end;
    }
    .board-gallery.rank-podium-grid .is-rank-1 { grid-column: 1 / -1; grid-row: 1; }
    .board-gallery.rank-podium-grid .is-rank-2 { grid-column: 1; grid-row: 2; }
    .board-gallery.rank-podium-grid .is-rank-3 { grid-column: 2; grid-row: 2; }
    /* 단상은 감춘다. 행이 나뉘어 한 줄로 이어지지 않는 데다,
       좁은 화면에서 세로 길이만 잡아먹는다. 위계는 금상 크기와 뱃지가 대신 나타낸다. */
    .board-gallery.rank-podium-grid .tour-item::after { display: none; }
}

/* 1위 왕관. 썸네일 위쪽 경계를 넘어 걸치게 둬서 사진에 얹힌 게 아니라 씌워진 느낌을 준다.
   .tour-item 은 overflow 가 열려 있어 카드 밖으로 나올 수 있고,
   시상대 안쪽 위 여백(44px)이 있어 리본과도 부딪히지 않는다. */
/* top 은 시상대 액자의 안쪽 테두리 선에 왕관 꼭대기를 맞춘 값이다.
   .rank-podium 의 padding-top 이 44px 이고 카드가 그 지점에서 시작하므로 -44px 이면 딱 맞는다.
   (padding-top 을 바꾸면 이 값도 같이 바꿔야 한다)
   크기는 viewBox(32:24 = 4:3) 비율을 지켜야 mask 와 SVG 가 어긋나지 않는다.
   left 는 금상 뱃지와 중심선을 맞춘 값: 뱃지 중심 = 12 + 62/2 = 43px, 왕관 중심 = 3 + 80/2 = 43px. */
/* top 은 '박스'가 아니라 '실제로 보이는 왕관 아랫면' 기준으로 잡아야 한다.
   도형은 viewBox 24 중 22.2 에서 끝나므로 박스 아래쪽 7.5% 는 빈 공간이다.
   보이는 아랫면 = top + 높이 × (22.2/24) = -58 + 60 × 0.925 ≈ -2.5px
   → 테두리(카드 상단 0px) 살짝 위에 얹힌다. 박스 기준으로 -64px 을 주면 8.5px 이나 떠 보인다. */
.rank-crown { position: absolute; top: -58px; left: 3px; z-index: 7;
    width: 80px; height: 60px; color: #E6BE3C; pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
    /* 아래 ::after 광택이 왕관 실루엣 밖으로 새지 않도록 같은 도형을 mask 로 씌운다. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M16 4.6L20.6 11.8L27.4 7.4L25.4 17.6H6.6L4.6 7.4L11.4 11.8Z'/%3E%3Ccircle cx='16' cy='4.6' r='2.5'/%3E%3Ccircle cx='4.6' cy='7.4' r='2.2'/%3E%3Ccircle cx='27.4' cy='7.4' r='2.2'/%3E%3Crect x='6' y='19.4' width='20' height='2.8' rx='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M16 4.6L20.6 11.8L27.4 7.4L25.4 17.6H6.6L4.6 7.4L11.4 11.8Z'/%3E%3Ccircle cx='16' cy='4.6' r='2.5'/%3E%3Ccircle cx='4.6' cy='7.4' r='2.2'/%3E%3Ccircle cx='27.4' cy='7.4' r='2.2'/%3E%3Crect x='6' y='19.4' width='20' height='2.8' rx='1.4'/%3E%3C/svg%3E") no-repeat center / contain; }
.rank-crown svg { display: block; width: 100%; height: 100%; fill: currentColor; }
/* 왕관 광택. 1위 뱃지와 똑같은 rank-shine 을 쓴다. 위 mask 덕분에 왕관 실루엣 안에서만 훑고,
   그냥 얹었을 때처럼 사각형으로 번쩍이지 않는다. */
.rank-crown::after {
    content: ''; position: absolute; top: -50%; left: 0;
    width: 42%; height: 200%; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,
                                       rgba(255, 255, 255, 0.85) 50%,
                                       rgba(255, 255, 255, 0) 100%);
    animation: rank-shine 2.8s ease-in-out infinite;
}
/* 1위 뱃지는 좋아요 버튼(top:12 right:12, sub.css)과 같은 높이에 둬서 좌우로 마주보게 한다.
   왕관은 그 위에 걸쳐 얹히고, 아랫단이 뱃지 윗부분과 살짝 겹쳐야 '쓴' 것처럼 보인다. */
.tour-item.is-rank-1 .rank-badge { top: 12px; left: 12px; width: 62px; height: 62px;
    font-size: 1.0625rem; }
@media (max-width: 768px) {
  /* 뱃지 중심 = 8 + 46/2 = 31px, 왕관 중심 = 3 + 56/2 = 31px */
  /* 데스크톱과 같은 계산: -41 + 42 × 0.925 ≈ -2.1px */
  .rank-crown { top: -41px; left: 3px; width: 56px; height: 42px; }
  .tour-item.is-rank-1 .rank-badge { top: 8px; left: 8px; width: 46px; height: 46px;
      font-size: 0.875rem; }
}

/* 수상 뱃지(금상/은상/동상)는 정원(正圓). 가로세로를 같은 값으로 고정하고 padding 을 없애야
   글자 길이에 따라 알약으로 늘어나지 않는다. 두 글자가 원 안에서 줄바꿈되지 않게 nowrap 을 건다.
   지름은 좋아요 버튼(54px)과 비슷하게 잡아 좌우가 대칭으로 보이게 했다. */
.rank-badge { position: absolute; top: 12px; left: 12px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 0.875rem; color: #fff; background: var(--rank-color, #087C72); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
/* 금색은 단색보다 그라데이션이 금속처럼 읽힌다. 밝은 부분에서 흰 글자가 묻히지 않게 그림자를 준다. */
.rank-badge.rank-1 { text-shadow: 0 1px 2px rgba(90, 60, 0, 0.45);
    background: linear-gradient(145deg, #F3DE93 0%, #D9B441 38%, #B8901F 72%, #EFD684 100%); }
.rank-badge.rank-2 { background: linear-gradient(145deg, #DCE0E5 0%, #A9B0B8 40%, #82888F 75%, #CDD2D8 100%);
    text-shadow: 0 1px 2px rgba(60, 65, 70, 0.45); }
.rank-badge.rank-3 { background: linear-gradient(145deg, #E0B48C 0%, #B87333 42%, #91561F 76%, #D9A97C 100%);
    text-shadow: 0 1px 2px rgba(70, 40, 10, 0.45); }
/* 금·은·동 뱃지 위를 훑고 지나가는 하이라이트. overflow:hidden 이라 원 안에서만 보인다. */
.rank-badge::after {
    content: ''; position: absolute; top: -50%; left: 0;
    width: 42%; height: 200%; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,
                                       rgba(255, 255, 255, 0.75) 50%,
                                       rgba(255, 255, 255, 0) 100%);
    animation: rank-shine 2.8s ease-in-out infinite;
}
@media (max-width: 768px) {
  .rank-badge { top: 6px; left: 6px; width: 36px; height: 36px; font-size: 0.75rem; }
  /* 모바일에서도 단상이 보이므로 아래 여백은 0 을 유지한다(단상이 바닥선을 딛고 선다). */
  /* 모바일은 단상을 감추므로, 카드가 액자 바닥선에 붙지 않게 아래 여백을 되살린다. */
  .rank-podium { padding: 58px 12px 18px; border-radius: 16px; box-shadow: 0 0 0 3px rgba(230, 190, 60,0.14), 0 6px 16px rgba(0, 0, 0, 0.06); }
}

/* 무한 스크롤 감지 지점(.gallery-more)의 스타일은 장소검색과 공유하므로 sub.css 에 있다. */

/* ── 갤러리 상단 이벤트 안내 패널 ──────────────────────────────
   왼쪽은 안내문(제목 + 기간/투표 규칙), 오른쪽은 외부 응모 버튼.
   좁은 화면에서는 세로로 접히고 버튼이 가로 폭을 채운다. */
.event-notice { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 12px 0 0; padding: 22px 26px; border: 1px solid #D6E7E2; border-left: 5px solid var(--color1, #087C72); border-radius: 14px; background: linear-gradient(135deg, #F4FAF8 0%, #FFFFFF 62%); box-shadow: 0 2px 10px rgba(8, 124, 114, 0.06); }
.event-notice-body { flex: 1 1 420px; min-width: 0; }
.event-notice-title { margin: 0 0 14px; font-size: 1.5rem; font-weight: 700; line-height: 1.35; color: #2D2D2D; word-break: keep-all; }
.event-notice-lead { display: block; margin-bottom: 4px; font-size: 0.9375rem; font-weight: 600; color: var(--color1, #087C72); }
.event-notice-period { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 0.9375rem; color: #4A5058; word-break: keep-all; }
.event-notice-label { flex: 0 0 auto; padding: 2px 9px; border-radius: 6px; background: #E7F2EF; color: var(--color1, #087C72); font-size: 0.8125rem; font-weight: 600; }
.event-notice-value strong { color: #2D2D2D; font-weight: 700; }
/* 규칙 문구는 기간 아래로 흘려 보낸다. 기간이 없으면 이 줄만 남는다. */
.event-notice-note { display: block; margin-top: 4px; font-size: 0.875rem; color: #6B7178; }
.event-notice-note strong { color: #4A5058; font-weight: 700; }
/* 투표 잠김. 색으로 경고하지 않고 톤만 낮춘다. */
.event-notice-period.is-locked { color: #6B7178; }
.event-notice-period.is-locked .event-notice-label { background: #EEF0F2; color: #6B7178; }
.event-notice-period.is-locked .event-notice-value strong { color: #6B7178; }

.event-notice-action { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px; }
/* common.css 의 `a:visited { color: inherit }` 가 특이도로 이기므로 :link/:visited 를 함께 명시한다. */
.event-join-btn, .event-join-btn:link, .event-join-btn:visited { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 180px; padding: 14px 26px; border-radius: 10px; background: var(--color1, #087C72); color: #fff; font-size: 1.0625rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(8, 124, 114, 0.24); transition: 0.25s; }
.event-join-btn:hover, .event-join-btn:focus, .event-join-btn:visited:hover, .event-join-btn:visited:focus { background: #065C54; color: #fff; box-shadow: 0 6px 16px rgba(8, 124, 114, 0.32); transform: translateY(-1px); }
.event-join-btn-arrow { font-size: 1.125rem; line-height: 1; transition: transform 0.25s; }
.event-join-btn:hover .event-join-btn-arrow { transform: translateX(3px); }
.event-join-note { margin: 0; font-size: 0.8125rem; color: #6B7178; }

@media (max-width: 768px) {
  .event-notice { gap: 16px; padding: 18px; }
  .event-notice-body { flex-basis: 100%; }
  .event-notice-title { font-size: 1.25rem; }
  .event-notice-lead { font-size: 0.875rem; }
  .event-notice-action { width: 100%; }
  .event-join-btn { width: 100%; }
}

/* 이벤트 기간 안내 + 기간 밖 좋아요 잠금 */
.event-period { margin: 12px 0 0; padding: 12px 16px; border-radius: 10px; background: #F2F8F6; color: #2D2D2D; font-size: 0.9375rem; word-break: keep-all; }
.event-period.is-closed { background: #FBF1F0; color: #8C3A32; }
.event-period-note { color: #6B7178; }
.event-period.is-closed .event-period-note { color: inherit; }
.like-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── 이벤트 참여 모달 ─────────────────────────────────────────── */
.entry-modal[hidden] { display: none; }
.entry-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.entry-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.entry-modal-inner { position: relative; z-index: 1; background: #fff; border-radius: 16px; width: min(92vw, 520px); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0,0,0,0.25); overflow: hidden; }
.entry-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #E9ECF1; }
.entry-modal-header h3 { margin: 0; font-size: 1.125rem; color: #2D2D2D; }
.entry-modal-close { width: 32px; height: 32px; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: #6B7178; cursor: pointer; border-radius: 6px; }
.entry-modal-close:hover { background: #F2F4F7; }
.entry-modal-body { padding: 20px; overflow: auto; }
.entry-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid #E9ECF1; }

.entry-field { border: 0; padding: 0; margin: 0 0 20px; }
.entry-field:last-child { margin-bottom: 0; }
.entry-field legend, .entry-label { display: block; padding: 0; margin-bottom: 8px; font-weight: 600; color: var(--color1, #087C72); font-size: 0.9375rem; }
.entry-radio-row { display: flex; gap: 20px; flex-wrap: wrap; }
.entry-radio, .entry-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9375rem; word-break: keep-all; }
.entry-check { margin-top: 10px; align-items: flex-start; }
.entry-policy { max-height: 160px; overflow: auto; padding: 12px 14px; border: 1px solid #E9ECF1; border-radius: 10px; background: #FAFBFC; font-size: 0.875rem; color: #4A5058; line-height: 1.6; }
.entry-policy p { margin: 0 0 6px; }
.entry-policy p:last-child { margin-bottom: 0; }
.entry-input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #D8DCE2; border-radius: 8px; font-size: 0.9375rem; }
.entry-input[readonly] { background: #F2F4F7; color: #4A5058; }
.entry-hint { margin: 6px 0 0; font-size: 0.8125rem; color: #6B7178; }
.entry-error[hidden] { display: none; }
.entry-error { margin: 16px 0 0; padding: 10px 12px; border-radius: 8px; background: #FBF1F0; color: #8C3A32; font-size: 0.875rem; }

/* 응모 철회 — 개인정보 삭제 + 좋아요 해제가 함께 일어나는 위험 동작이라 확인/취소와 분리해 둔다.
   [class^=c-btn] 이 display 를 지정하므로 hidden 처리를 여기서 다시 눌러준다. */
.entry-withdraw[hidden] { display: none; }
.entry-modal-footer .entry-withdraw { margin-right: auto; border-color: #C9503F; background: #fff; color: #8C3A32; }
.entry-modal-footer .entry-withdraw:hover,
.entry-modal-footer .entry-withdraw:focus { background: #FBF1F0; color: #8C3A32; }
.entry-modal-footer .entry-withdraw[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 480px) {
  /* 버튼이 셋으로 늘어 좁은 화면에서 넘치지 않도록 최소폭만 완화한다. */
  .entry-modal-footer [class^=c-btn-l] { min-width: 0; padding: 8px 10px; font-size: 0.9375rem; }
}

/* ── 당첨자 확인 모달 (entry-modal 골격 재사용) ───────────────── */
button.event-join-btn { border: 0; font-family: inherit; cursor: pointer; }
/* 확인기간 시작 전 — 버튼 자리는 유지하되 누를 수 없게 회색으로 내린다. */
button.event-join-btn[disabled],
button.event-join-btn[disabled]:hover,
button.event-join-btn[disabled]:focus { background: #C9CED4; color: #fff; box-shadow: none; transform: none; cursor: not-allowed; }
.winners-modal .entry-modal-inner { width: min(92vw, 760px); }
.winners-search { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 14px 20px; border-bottom: 1px solid #E9ECF1; }
.winners-search .entry-label { margin: 0; }
.winners-search .entry-input { width: 160px; }
.winners-result { margin: 0 0 0 auto; font-size: 0.875rem; color: #6B7178; }
/* 표 머리글이 스크롤 영역 맨 위에 붙도록 위쪽 여백을 뺀다. */
.winners-modal .entry-modal-body { padding: 0 20px 20px; }
.winners-modal .board-list-basic table thead th { position: sticky; top: 0; z-index: 1; }
.winners-modal .board-list-basic table th,
.winners-modal .board-list-basic table td { padding: 10px 12px; font-size: 0.9375rem; word-break: keep-all; }
/* 좁은 화면에서 board-list-basic 이 tr 에 display:flex 를 주므로 검색으로 숨긴 행을 다시 눌러준다. */
.winners-modal .board-list-basic table tbody tr[hidden],
.winners-modal .board-empty[hidden] { display: none; }
@media all and (max-width:1199px) {
  .winners-modal .entry-modal-body { padding-top: 4px; }
  .winners-modal .board-list-basic table td { padding: 0; }
}

/* 글쓰기 대표이미지 미리보기 */
.thumb-preview[hidden] { display: none; }
/* 대표이미지 칸 전용 여백. 미리보기가 붙으면 행이 길어져 내용이 위아래 테두리에 닿는다.
   .cont 는 운영시설 등재요청 수정 화면에서도 쓰는 공용 클래스라 전역으로 주지 않고
   이 칸에만 붙인 thumb-cont 로 한정한다. */
.board-write div .cont.thumb-cont { padding: 14px 0; }

/* width:100% 라야 .cont 의 flex-wrap 이 걸려 선택 버튼 옆이 아니라 아랫줄로 내려간다.
   내부는 세로로 쌓아 제거 버튼이 이미지 오른쪽이 아니라 아래에 오게 한다. */
.thumb-preview { width: 100%; margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.thumb-preview img { display: block; width: 220px; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid #E9ECF1; }