@charset "utf-8";

/* ARC Video Archive Skin v2
   - 테마 head/tail을 건드리지 않습니다.
   - 헤더·홈 화면과 정확히 같은 방식(max-width + margin:auto + 좌우 40px 패딩)으로
     맞춥니다. 예전에는 100vw 기준으로 폭을 계산해서(뷰포트 escape 기법) 헤더와
     스크롤바 폭만큼(보통 15~17px) 미세하게 어긋났습니다 — 부모가 이미 홈 화면과
     같은 폭이라 그 기법이 애초에 필요 없었습니다. */
.arc-board {
    --arc-text:#111111;
    --arc-muted:#666666;
    --arc-light:#8b8f97;
    --arc-line:#e4e7eb;
    --arc-soft:#f7f8fa;
    --arc-navy:#102746;
    --arc-max:1400px;
    width:100%;
    max-width:var(--arc-max);
    margin:0 auto !important;
    padding:0 40px;
    color:var(--arc-text);
    font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;
    line-height:1.5;
    letter-spacing:-.02em;
}
.arc-board, .arc-board * { box-sizing:border-box; }
.arc-board a { color:inherit; text-decoration:none; }
.arc-board img { max-width:100%; }
.arc-board button, .arc-board input, .arc-board textarea, .arc-board select { font:inherit; }
.arc-board h1,.arc-board h2,.arc-board h3,.arc-board p,.arc-board dl,.arc-board dt,.arc-board dd { margin:0; padding:0; }
.arc-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.arc-crumb { display:flex; align-items:center; gap:7px; flex:none; color:#8b8e94; font-size:12.5px; white-space:nowrap; }
.arc-crumb a { display:flex; color:#8b8e94; }
.arc-crumb a:hover { color:#1f2937; }
.arc-crumb svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.arc-crumb span { color:#c1c5cb; }
.arc-crumb span:last-child { color:#8b8e94; }
.arc-crumb-standalone { margin:18px 0; }

/* 공통 버튼 */
.arc-btn { display:inline-flex; align-items:center; justify-content:center; min-width:86px; height:46px; padding:0 18px; border:1px solid #d5d9df; border-radius:6px; background:#fff; color:#111 !important; font-weight:600; cursor:pointer; transition:.18s ease; }
.arc-btn:hover { border-color:#999; background:#fafafa; }
.arc-btn-dark { background:#111827 !important; border-color:#111827 !important; color:#fff !important; }

/* LIST */
.arc-list-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:12px 0 20px; padding-bottom:20px; }
.arc-list-head h1 { font-size:30px; line-height:1.15; font-weight:800; letter-spacing:-.04em; }
.arc-list-tools { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.arc-write-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; }
.arc-searchbox { display:flex; align-items:center; width:320px; height:46px; border:1px solid #d9dde3; border-radius:6px; background:#fff; overflow:hidden; }
.arc-searchbox input { flex:1; min-width:0; height:100%; padding:0 4px 0 14px; border:0 !important; outline:0; background:transparent; color:#111; }
.arc-searchbox button { width:48px; height:100%; border:0; background:transparent; color:#111; cursor:pointer; font-size:22px; }
.arc-list-detail-link { flex:none; font-size:13px; color:var(--arc-muted); white-space:nowrap; text-decoration:underline; }
.arc-list-detail-link:hover { color:#111; }
@media (max-width:640px) { .arc-list-tools { flex-wrap:wrap; } .arc-searchbox { width:100%; order:1; } .arc-list-detail-link { order:3; } }
.arc-category-row { margin:-8px 0 24px; font-size:14px; }
.arc-category-row a { display:inline-block; margin:0 8px 8px 0; padding:8px 12px; border:1px solid var(--arc-line); border-radius:20px; }
.arc-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 18px; }
.arc-card { min-width:0; }
.arc-card-link { display:block; }
.arc-card-thumb { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:7px; background:#eceff2; }
.arc-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.arc-card-link:hover .arc-card-thumb img { transform:scale(1.025); }
.arc-no-thumb { width:100%; height:100%; display:grid; place-items:center; color:#9aa1a9; background:#f0f2f4; font-size:12px; letter-spacing:.1em; }
.arc-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:52px; height:52px; padding-left:3px; border-radius:50%; background:rgba(0,0,0,.58); color:#fff; font-size:18px; }
.arc-card h3 { margin-top:12px; font-size:16px; line-height:1.4; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#111; }
.arc-card-meta { display:flex; gap:10px; margin-top:5px; color:#7a7f86; font-size:12px; }
.arc-card-meta span+span:before { content:"·"; margin-right:10px; }
.arc-empty { padding:100px 0; text-align:center; color:#777; border-top:1px solid var(--arc-line); border-bottom:1px solid var(--arc-line); }
.arc-paging { margin:46px 0 18px; text-align:center; }
.arc-paging .pg_wrap { display:inline-block; }

/* VIEW */
/* 위 여백 — 헤더 바로 밑에서 큰 사진이 시작하면 붙어 보인다.
   실제로 헤더 아래끝과 사진 위끝의 간격이 0px 이었다.
   목록 화면은 12px(.arc-list-head 의 margin), 컬렉션은 21px 을 두고
   있는데 상세만 빠져 있었다. 사진은 덩치가 커서 조금 더 준다. */
.arc-view-page { padding-top:28px; padding-bottom:10px; }
.arc-view-grid { display:grid; grid-template-columns:minmax(0, 1.58fr) minmax(440px, .92fr); gap:48px; align-items:start; }
.arc-left-column { min-width:0; }
.arc-main-media { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#eef0f2; border-radius:2px; }
.arc-main-media img,.arc-main-media video { width:100%; height:100%; display:block; }
.arc-main-media img { object-fit:cover; }
.arc-main-media video { object-fit:contain; background:#000; }
.arc-media-empty { width:100%; height:100%; display:grid; place-items:center; color:#777; }
.arc-zoom { position:absolute; left:14px; bottom:14px; width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(0,0,0,.58); color:#fff; font-size:20px; cursor:pointer; }

.arc-side-panel { min-width:0; padding-top:2px; }
.arc-side-title { margin:0 0 12px !important; font-size:38px !important; line-height:1.18 !important; font-weight:800 !important; letter-spacing:-.05em !important; color:#111 !important; word-break:keep-all; }
.arc-admin-stat { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; font-size:11px; color:#555; }
.arc-admin-stat span { padding:5px 8px; border:1px solid #e5e7eb; border-radius:4px; background:#fafafa; }
.arc-admin-stat .arc-admin-badge { background:#111827; border-color:#111827; color:#fff; }
.arc-info-table { margin-top:4px !important; border-top:1px solid #dfe2e6; }
.arc-info-row { display:grid; grid-template-columns:82px minmax(0,1fr); gap:14px; padding:13px 0; border-bottom:1px solid #eaecf0; font-size:14px; line-height:1.6; }
.arc-info-row dt { font-weight:700; color:#111; }
.arc-info-row dd { color:#333; word-break:keep-all; }
.arc-guide-row { padding-top:15px; padding-bottom:16px; }

.arc-box { margin-top:18px; padding:20px 22px; border:1px solid #e0e3e7; border-radius:7px; background:#fff; }
.arc-box h2 { margin:0 0 14px !important; font-size:18px !important; line-height:1.3 !important; font-weight:800 !important; color:#111 !important; }
.arc-file-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.arc-file-item { display:grid; grid-template-columns:62px minmax(0,1fr); gap:8px; font-size:13px; line-height:1.5; }
.arc-file-item b { font-weight:700; }
.arc-file-item span { color:#444; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.arc-kogl { display:flex; align-items:center; gap:16px; }
.arc-kogl-mark { flex:0 0 106px; height:58px; display:flex; flex-direction:column; justify-content:center; border:1px solid #dcdfe4; border-radius:5px; overflow:hidden; background:#fff; }
.arc-kogl-word { height:32px; display:grid; place-items:center; background:#111827; color:#fff; font-size:14px; font-weight:800; letter-spacing:-.03em; }
.arc-kogl-type { height:26px; display:grid; place-items:center; font-size:11px; font-weight:700; color:#111; }
.arc-kogl-text { min-width:0; }
.arc-kogl-text strong { display:block; font-size:13px; line-height:1.45; color:#111; }
.arc-kogl-text p { margin-top:5px; font-size:12px; line-height:1.55; color:#666; }
.arc-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.arc-actions .arc-btn { width:100%; height:48px; }

/* 관련자료 — 사진 아래에 독립 구역으로 세운다.
   ------------------------------------------------------------------
   한동안은 사진 아랫부분에 겹쳐 두고 마우스를 올리면 올라오게 했었다.
   그런데 겹쳐 두니 있다는 것 자체를 모르고 지나가는 사람이 많았다.
   (제목줄만 62px 보이는데, 사진 위 어두운 띠라 사진의 일부처럼 보였다.)
   그래서 아래 독립 구역으로 되돌린다 — 늘 보이고, 옆으로 넘겨 볼 수 있다.

   화살표와 잡아끌기는 그대로 둔다. 그 둘은 겹치기와 무관하게 쓸모 있다. */

/* 사진 위에 얹히는 것들(크게보기·좌우 넘김 단추)의 기준 칸.
   관련자료는 이 안에 없으므로 이 칸의 높이는 곧 사진 높이다 —
   좌우 넘김 단추의 top:50% 가 정확히 사진 가운데가 된다. */
.arc-media-stage { position:relative; }

.arc-related { margin-top:28px; }

/* 화살표 — 머리줄이 아니라 썸네일 줄 좌우 끝에 세운다.
   .arc-related-body 를 기준으로 위아래를 꽉 채운 뒤 버튼만 가운데 정렬하므로,
   제목이 두 줄로 늘어나거나 썸네일 높이가 바뀌어도 어긋나지 않는다.
   wrapper 는 pointer-events:none 이라 화살표 사이의 빈 구간이 썸네일
   클릭을 가로막지 않는다(버튼만 다시 auto 로 되돌린다). */
.arc-related-body { position:relative; }
.arc-related-arrows {
    position:absolute; left:-6px; right:-6px; top:0; bottom:0; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    pointer-events:none;
}
/*
 * 선택자를 .arc-related-body 부터 쓴 이유
 *   이 파일 아래쪽(기본 .arc-related-arrows button)과 반응형 블록에 크기·색을
 *   정하는 규칙이 이미 있고 그것들이 여기보다 뒤에 온다. 같은 선택자로 쓰면
 *   뒤에 오는 쪽이 이겨서 여기 값이 무시된다. 한 단계 더 좁혀 순서와 무관하게
 *   이기게 한다.
 */
.arc-related-body .arc-related-arrows button {
    pointer-events:auto;
    width:32px; height:32px; font-size:16px;
    background:#fff; border:1px solid #d9dde3; color:#111;
    box-shadow:0 2px 8px rgba(16,20,26,.14);
}
.arc-related-body .arc-related-arrows button:hover { background:#f4f6f8; }
.arc-related-item.is-active { outline:2px solid #111; outline-offset:-2px; }

/* 사진 위 좌우 넘김 단추 — 아래 띠까지 내려가지 않고도 다음 자료로 넘긴다.
   평소 반투명으로 두고 사진에 마우스를 올리면 진해진다. */
.arc-media-nav {
    position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:34px; height:34px; border:1px solid rgba(255,255,255,.45); border-radius:50%;
    background:rgba(16,20,26,.42); color:#fff; font-size:17px; line-height:1;
    display:grid; place-items:center; cursor:pointer;
    opacity:.75; transition:opacity .2s ease, background .2s ease;
}
.arc-media-nav.is-prev { left:12px; }
.arc-media-nav.is-next { right:12px; }
.arc-media-stage:hover .arc-media-nav { opacity:1; }
.arc-media-nav:hover { background:rgba(16,20,26,.8); }

/* 띠를 잡아끌 수 있다는 것을 커서로 알린다 */
.arc-related-track { cursor:grab; }
.arc-related-track.is-dragging { cursor:grabbing; scroll-behavior:auto; }
/* 끄는 동안에는 썸네일이 마우스를 가로채지 않게 — 안 그러면 끌다가
   이미지 위에서 손을 떼면 그 이미지가 선택될 수 있다 */
.arc-related-track.is-dragging .arc-related-item { pointer-events:none; }

/* 좁은 화면 — 사진 위 좌우 단추는 숨긴다. 아래 띠에 같은 화살표가 늘 보이고,
   손가락으로는 띠를 직접 밀어 넘기는 편이 편하다. */
@media (hover:none), (max-width:820px) {
    .arc-media-nav { display:none; }
}
@media (prefers-reduced-motion: reduce) { .arc-related { transition:none; } }

.arc-related-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.arc-related-head h2 { font-size:18px !important; line-height:1.3 !important; font-weight:800 !important; color:#111 !important; }
.arc-related-arrows { display:flex; gap:5px; }
.arc-related-arrows button { width:34px; height:34px; border:1px solid #d9dde3; border-radius:50%; background:#fff; color:#111; cursor:pointer; font-size:19px; line-height:1; }
.arc-related-track { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-inline:contain; }
.arc-related-track::-webkit-scrollbar { display:none; }
.arc-related-item { flex:0 0 calc((100% - 24px)/4); aspect-ratio:4/3; overflow:hidden; border-radius:5px; background:#eee; }
.arc-related-item img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .2s ease; }
.arc-related-item:hover img { transform:scale(1.03); }

/* 장소 안내 / 지도 자리 */
.arc-location { margin-top:48px; padding-top:28px; border-top:1px solid #dfe2e6; }
.arc-location-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.arc-location-head h2 { font-size:22px !important; font-weight:800 !important; color:#111 !important; }
.arc-location-head p { margin-top:5px; color:#666; font-size:13px; }
.arc-map-link { font-size:13px; color:#333 !important; border-bottom:1px solid #777; }
.arc-location-inner { display:grid; grid-template-columns:310px minmax(0,1fr); min-height:310px; border:1px solid #e1e4e8; }
.arc-location-copy { padding:24px; background:#fff; }
.arc-location-copy dl { display:grid; gap:18px; }
.arc-location-copy dl>div { display:grid; gap:4px; }
.arc-location-copy dt { font-size:13px; font-weight:800; color:#111; }
.arc-location-copy dd { font-size:13px; line-height:1.6; color:#444; white-space:pre-line; }
.arc-map-placeholder { position:relative; display:grid; place-items:center; min-height:310px; overflow:hidden; background:#edf2f5; color:#1f2937 !important; }
.arc-map-grid { position:absolute; inset:0; opacity:.55; background-image:linear-gradient(#dbe3e8 1px, transparent 1px),linear-gradient(90deg,#dbe3e8 1px,transparent 1px); background-size:44px 44px; }
.arc-map-road { position:absolute; display:block; width:130%; height:30px; background:#fff; border:1px solid #d4dce1; transform-origin:center; }
.arc-map-road-a { transform:rotate(12deg); }
.arc-map-road-b { transform:rotate(-24deg); }
.arc-map-pin { position:relative; z-index:2; width:38px; height:38px; display:grid; place-items:center; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#111827; color:#fff; box-shadow:0 3px 10px rgba(0,0,0,.15); }
.arc-map-pin::first-letter { color:transparent; }
.arc-map-label { position:relative; z-index:2; margin-top:70px; padding:7px 11px; border-radius:4px; background:rgba(255,255,255,.94); box-shadow:0 2px 7px rgba(0,0,0,.1); font-size:12px; font-weight:700; }
.arc-view-actions { display:flex; justify-content:flex-end; gap:8px; margin:28px 0 50px; }

/* WRITE */
.arc-write-page { padding-bottom:50px; }
.arc-write { width:min(100%, 1080px); margin:0 auto; }
.arc-write-title { margin:0 !important; font-size:32px !important; font-weight:800 !important; color:#111 !important; }
.arc-write-row { margin-bottom:18px; }
.arc-write-row>label { display:block; margin-bottom:7px; font-weight:700; font-size:14px; }
.arc-write-row input[type=text],.arc-write-row input[type=password],.arc-write-row input[type=file],.arc-write-row textarea,.arc-write-row select { width:100%; min-height:44px; padding:10px 12px; border:1px solid #d9dde3; border-radius:6px; background:#fff; color:#111; }
.arc-write-row textarea { min-height:110px; resize:vertical; }
.arc-write-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.arc-write-help { margin:5px 0; color:#777; font-size:12px; }
.arc-write-help .arc-inline-check { display:inline; margin:0; font-weight:400; }
.arc-file-upload { padding:14px; border:1px solid #e4e7eb; border-radius:6px; background:#fafbfc; }
.arc-file-upload small { margin-left:5px; color:#777; font-weight:400; }
.arc-write-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:28px; }

@media (max-width:1180px) {
    .arc-board { width:min(100% - 36px, var(--arc-max)); }
    .arc-view-grid { grid-template-columns:minmax(0,1.25fr) minmax(380px,.85fr); gap:32px; }
    .arc-side-title { font-size:34px !important; }
    .arc-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:920px) {
    .arc-view-grid { grid-template-columns:1fr; gap:28px; }
    .arc-side-panel { max-width:none; }
    .arc-main-media { max-width:850px; }
    .arc-location-inner { grid-template-columns:1fr; }
    .arc-location-copy { order:2; }
    .arc-map-placeholder { min-height:280px; }
}
@media (max-width:720px) {
    /* 좌우 여백이 40px 로 남아 있어 375px 폰에서 80px(화면의 21%)를
       테두리가 먹고 있었다. 폭 계산이 아니라 여백 자체를 줄인다. */
    .arc-board { width:100%; padding:0 14px; }
    /* 폰에서는 화면이 짧아 위 여백을 줄인다 */
    .arc-view-page { padding-top:16px; }
    .arc-breadcrumb { margin-top:8px; }
    .arc-list-head { flex-direction:column; align-items:stretch; gap:18px; }
    .arc-list-head h1 { font-size:28px; }
    .arc-list-tools { width:100%; }
    .arc-searchbox { flex:1; width:auto; }
    .arc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 10px; }
    .arc-side-title { font-size:30px !important; }
    .arc-file-grid { grid-template-columns:1fr; }
    .arc-actions { grid-template-columns:1fr; }
    .arc-related-item { flex-basis:44%; }
    .arc-write-grid { grid-template-columns:1fr; }
    .arc-location-head { align-items:flex-start; flex-direction:column; }
}
@media (max-width:460px) {
    /* 1열로 늘리면 한 화면에 한 장만 남아 목록을 훑어 고를 수가 없다.
       메인·검색 결과와 같은 기준으로 2열을 유지한다. */
    .arc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 10px; }
    /* 폭이 좁아진 만큼 제목은 잘라내지 말고 두 줄까지 펼친다 */
    .arc-card h3 { margin-top:9px; font-size:14px; line-height:1.4; white-space:normal;
                  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
    .arc-card-meta { flex-wrap:wrap; gap:6px; margin-top:4px; font-size:12px; }
    .arc-card-meta span+span:before { margin-right:6px; }
    .arc-related-item { flex-basis:70%; }
    .arc-view-actions { flex-wrap:wrap; }
}


/* =========================================================
   v3 overrides
   - 현재 게시물 첨부파일 갤러리
   - 공공누리 0~4유형
   - 교통/주차 안내 제거
   ========================================================= */
.arc-board .arc-related-head > div:first-child p {
    margin-top:4px;
    color:#777;
    font-size:12px;
}
.arc-board .arc-related-item {
    position:relative;
    padding:0;
    border:2px solid transparent;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}
.arc-board .arc-related-item.is-active {
    border-color:#111;
}
.arc-board .arc-related-item:focus-visible {
    outline:2px solid #111;
    outline-offset:2px;
}
.arc-board .arc-video-thumb {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#181b20;
    color:#fff;
}
.arc-board .arc-video-thumb-play {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    padding-left:3px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    font-size:17px;
}
.arc-board .arc-video-thumb-label {
    font-size:12px;
    opacity:.82;
}
.arc-board .arc-actions .is-disabled {
    pointer-events:none;
    opacity:.45;
}

/* 다운로드·담기·공유하기 — 촬영지 바로 아래 한 줄
   ------------------------------------------------------------------
   전에는 이 세 개가 패널 맨 끝(공공누리 안내 아래)에 2열 격자로 있어서,
   화면을 한참 내려야 보였다. 이 화면에서 가장 많이 쓰는 동작이므로 위로
   올리고 한 줄에 나란히 둔다. 곁패널은 데스크톱에서 최소 440px,
   좁아지면 본문 폭 전체를 쓰므로 셋을 한 줄에 넣을 자리는 충분하다.

   flex 를 쓰는 이유 — 위쪽 .arc-actions 는 grid 2열이다. 그 규칙을 건드리지
   않고 이 배치만 따로 두려고 .is-inline 에서 display 를 바꾼다. */
.arc-board .arc-actions.is-inline {
    display:flex;
    gap:8px;
    margin:14px 0 20px;
}
.arc-board .arc-actions.is-inline .arc-btn {
    flex:1 1 0;
    width:auto;
    min-width:0;          /* 0 으로 두지 않으면 min-width:86px 때문에 줄이 넘친다 */
    height:46px;
    padding:0 10px;
    white-space:nowrap;
}
/* 다운로드가 주된 동작이라 조금 더 넓게 */
.arc-board .arc-actions.is-inline #arcDownloadLink { flex:1.3 1 0; }

@media (max-width:520px) {
    .arc-board .arc-actions.is-inline { gap:6px; }
    .arc-board .arc-actions.is-inline .arc-btn {
        height:44px;
        padding:0 4px;
        font-size:13px;
    }
}

/* 공공누리 유형을 보여주는 정보형 카드 */
.arc-board .arc-kogl-heading {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}
.arc-board .arc-kogl-heading h2 {
    margin:0 !important;
}
.arc-board .arc-kogl-heading-note {
    color:#777;
    font-size:11px;
}
.arc-board .arc-kogl-card {
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    border:1px solid #dfe3e8;
    border-radius:6px;
    overflow:hidden;
    background:#fff;
}
.arc-board .arc-kogl-license {
    min-height:112px;
    padding:16px 12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#f4f5f7;
    border-right:1px solid #dfe3e8;
}
.arc-board .arc-kogl-brand {
    color:#111;
    font-size:17px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.04em;
}
.arc-board .arc-kogl-eng {
    margin-top:4px;
    color:#7a7f86;
    font-size:8px;
    line-height:1.25;
}
.arc-board .arc-kogl-license strong {
    margin-top:12px;
    color:#111;
    font-size:15px;
    line-height:1.2;
}
.arc-board .arc-kogl-detail {
    min-width:0;
    padding:16px 17px;
}
.arc-board .arc-kogl-detail > strong {
    display:block;
    color:#111;
    font-size:13px;
    line-height:1.45;
}
.arc-board .arc-kogl-detail > p {
    margin-top:6px;
    color:#555;
    font-size:12px;
    line-height:1.55;
}
.arc-board .arc-kogl-conditions {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:10px;
}
.arc-board .arc-kogl-conditions span {
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:4px 8px;
    border:1px solid #d9dde2;
    border-radius:999px;
    background:#fafafa;
    color:#333;
    font-size:10px;
    line-height:1.2;
    white-space:nowrap;
}
.arc-board .arc-kogl-0 .arc-kogl-license { background:#f5f7f5; }
.arc-board .arc-kogl-1 .arc-kogl-license { background:#f5f6f8; }
.arc-board .arc-kogl-2 .arc-kogl-license { background:#f7f5f4; }
.arc-board .arc-kogl-3 .arc-kogl-license { background:#f5f5f7; }
.arc-board .arc-kogl-4 .arc-kogl-license { background:#f6f4f4; }
.arc-board .arc-kogl-unset .arc-kogl-license { background:#f7f7f7; }

/* 하단 장소안내: 주소 + 지도만 */
.arc-board .arc-location-inner.no-address {
    grid-template-columns:1fr;
}
.arc-board .arc-location-inner.no-address .arc-map-placeholder {
    min-height:310px;
}
.arc-board .arc-required {
    color:#c62828;
}

@media (max-width:720px) {
    .arc-board .arc-kogl-card {
        grid-template-columns:1fr;
    }
    .arc-board .arc-kogl-license {
        min-height:0;
        border-right:0;
        border-bottom:1px solid #dfe3e8;
    }
}


/* v4: show official Kogl badge images */
.arc-board .arc-kogl-detail-full { padding: 18px 18px 16px; }
.arc-board .arc-kogl-image-wrap { margin-top: 12px; }
.arc-board .arc-kogl-image { display:block; max-width: 180px; width: 100%; height: auto; border:1px solid #d9dde2; background:#fff; }
.arc-board .arc-kogl-card { grid-template-columns: 1fr; }
.arc-board .arc-kogl-card .arc-kogl-detail { min-width:0; }
.arc-board .arc-kogl-conditions { margin-top: 12px; }


/* =========================================================
   v5 - compact Public Nuri box only
   Other layout is intentionally untouched.
   ========================================================= */
.arc-board .arc-kogl-box {
    padding: 18px 20px 18px;
}
.arc-board .arc-kogl-heading {
    margin-bottom: 10px;
}
.arc-board .arc-kogl-heading h2 {
    font-size: 18px;
    line-height: 1.3;
}
.arc-board .arc-kogl-heading-note {
    font-size: 11px;
    color: #888;
}
.arc-board .arc-kogl-card {
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    background: #fff;
}
.arc-board .arc-kogl-detail-full {
    padding: 14px 16px 13px;
}
.arc-board .arc-kogl-detail > strong {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}
.arc-board .arc-kogl-detail > p {
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #666;
}
.arc-board .arc-kogl-image-wrap {
    margin-top: 10px;
    margin-bottom: 2px;
}
.arc-board .arc-kogl-image {
    width: auto;
    max-width: 118px;
    max-height: 54px;
    object-fit: contain;
    border: 0;
    background: transparent;
}
.arc-board .arc-kogl-conditions {
    gap: 5px;
    margin-top: 9px;
}
.arc-board .arc-kogl-conditions span {
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid #e1e4e8;
    background: #fafafa;
    color: #555;
    font-size: 10px;
    border-radius: 999px;
}

@media (min-width: 900px) {
    .arc-board .arc-kogl-detail-full {
        display: grid;
        grid-template-columns: minmax(0,1fr) 124px;
        grid-template-areas:
            "title image"
            "desc  image"
            "tags  image";
        column-gap: 16px;
        align-items: center;
    }
    .arc-board .arc-kogl-detail-full > strong { grid-area: title; }
    .arc-board .arc-kogl-detail-full > p { grid-area: desc; }
    .arc-board .arc-kogl-image-wrap {
        grid-area: image;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .arc-board .arc-kogl-conditions { grid-area: tags; }
}

@media (max-width: 899px) {
    .arc-board .arc-kogl-image {
        max-width: 110px;
        max-height: 50px;
    }
}


/* =========================================================
   v6 MULTI UPLOAD + RELATED THUMBNAIL
   ========================================================= */
.arc-board .arc-upload-pad {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.arc-board .arc-multi-upload {
    margin:28px 0 8px;
    padding:22px;
    border:1px solid #dde1e6;
    border-radius:8px;
    background:#fff;
}

.arc-board .arc-multi-upload-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:16px;
}

.arc-board .arc-multi-upload-head h2 {
    margin:0 0 5px !important;
    color:#111 !important;
    font-size:18px !important;
    font-weight:800 !important;
}

.arc-board .arc-multi-upload-head p {
    margin:0;
    color:#6b7280;
    font-size:13px;
    line-height:1.5;
}

.arc-board .arc-multi-limit {
    flex:0 0 auto;
    padding:6px 10px;
    border:1px solid #e1e4e8;
    border-radius:999px;
    background:#fafafa;
    color:#555;
    font-size:12px;
}

.arc-board .arc-dropzone {
    position:relative;
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:30px 20px;
    border:1.5px dashed #c8cdd4;
    border-radius:8px;
    background:#fafbfc;
    text-align:center;
    transition:border-color .15s ease, background .15s ease;
}

.arc-board .arc-dropzone.is-dragover {
    border-color:#111;
    background:#f3f4f6;
}

.arc-board .arc-dropzone.has-files {
    min-height:170px;
}

.arc-board .arc-dropzone input[type=file] {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.arc-board .arc-dropzone-icon {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid #d8dce2;
    border-radius:50%;
    background:#fff;
    color:#111;
    font-size:26px;
    line-height:1;
}

.arc-board .arc-dropzone strong {
    margin-top:3px;
    color:#111;
    font-size:15px;
}

.arc-board .arc-dropzone > span,
.arc-board .arc-dropzone > small {
    color:#777;
    font-size:12px;
}

.arc-board .arc-file-pick {
    height:40px;
    padding:0 18px;
    border:1px solid #111827;
    border-radius:5px;
    background:#111827;
    color:#fff;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}

.arc-board .arc-selected-summary {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:16px;
    padding:10px 12px;
    border-radius:5px;
    background:#f6f7f9;
    color:#444;
    font-size:12px;
}

.arc-board .arc-selected-summary[hidden] {
    display:none !important;
}

.arc-board .arc-selected-summary strong {
    color:#111;
}

.arc-board .arc-selected-summary button {
    margin-left:auto;
    border:0;
    background:transparent;
    color:#555;
    font-size:12px;
    text-decoration:underline;
    cursor:pointer;
}

.arc-board .arc-upload-preview {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

.arc-board .arc-upload-card {
    min-width:0;
    overflow:hidden;
    border:1px solid #e1e4e8;
    border-radius:6px;
    background:#fff;
}

.arc-board .arc-upload-card-media {
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#eef0f2;
}

.arc-board .arc-upload-card-media img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.arc-board .arc-upload-video-icon {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:#17191d;
    color:#fff;
}

.arc-board .arc-upload-video-icon span {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding-left:3px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
}

.arc-board .arc-upload-video-icon small {
    font-size:10px;
    letter-spacing:.08em;
    opacity:.75;
}

.arc-board .arc-upload-order {
    position:absolute;
    left:7px;
    top:7px;
    min-width:26px;
    height:26px;
    display:grid;
    place-items:center;
    padding:0 7px;
    border-radius:999px;
    background:rgba(0,0,0,.68);
    color:#fff;
    font-size:10px;
    font-weight:800;
}

.arc-board .arc-upload-order.is-representative {
    background:#111827;
}

.arc-board .arc-upload-remove {
    position:absolute;
    right:7px;
    top:7px;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.72);
    color:#fff;
    font-size:19px;
    line-height:1;
    cursor:pointer;
}

.arc-board .arc-upload-card-info {
    min-width:0;
    padding:9px 10px 10px;
}

.arc-board .arc-upload-card-info strong {
    display:block;
    overflow:hidden;
    color:#222;
    font-size:11px;
    font-weight:600;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.arc-board .arc-upload-card-info span {
    display:block;
    margin-top:3px;
    color:#888;
    font-size:10px;
}

.arc-board .arc-existing-wrap {
    margin-bottom:18px;
}

.arc-board .arc-existing-title {
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-bottom:9px;
}

.arc-board .arc-existing-title strong {
    font-size:13px;
    color:#111;
}

.arc-board .arc-existing-title span {
    color:#777;
    font-size:11px;
}

.arc-board .arc-existing-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.arc-board .arc-existing-card {
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    padding:9px 10px;
    border:1px solid #e2e5e9;
    border-radius:6px;
    background:#fafafa;
    cursor:pointer;
}

.arc-board .arc-existing-file-icon {
    height:38px;
    display:grid;
    place-items:center;
    border-radius:4px;
    background:#222;
    color:#fff;
    font-size:8px;
    font-weight:800;
}

.arc-board .arc-existing-file-info {
    min-width:0;
}

.arc-board .arc-existing-file-info strong {
    display:block;
    overflow:hidden;
    color:#222;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.arc-board .arc-existing-file-info span {
    display:block;
    margin-top:3px;
    color:#888;
    font-size:10px;
}

.arc-board .arc-existing-delete {
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#555;
    font-size:11px;
    white-space:nowrap;
}

.arc-board .arc-upload-help {
    margin-top:14px;
    line-height:1.55;
}

.arc-board .arc-upload-help code {
    padding:1px 4px;
    border-radius:3px;
    background:#f1f2f4;
    color:#333;
    font-size:11px;
}

@media (max-width:920px) {
    .arc-board .arc-upload-preview {
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .arc-board .arc-existing-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:720px) {
    .arc-board .arc-multi-upload {
        padding:16px;
    }
    .arc-board .arc-multi-upload-head {
        flex-direction:column;
        gap:10px;
    }
    .arc-board .arc-upload-preview {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .arc-board .arc-existing-grid {
        grid-template-columns:1fr;
    }
}

@media (max-width:480px) {
    .arc-board .arc-upload-preview {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .arc-board .arc-selected-summary {
        flex-wrap:wrap;
    }
}


/* =========================================================
   v7 REAL MAP EMBED
   - 상세화면: 실제 지도 iframe
   - 큰 지도 링크: 기존 카카오맵 유지
   ========================================================= */
.arc-board .arc-location-inner {
    align-items:stretch;
}

.arc-board .arc-map-embed {
    position:relative;
    min-width:0;
    height:460px;
    overflow:hidden;
    border:1px solid #e1e4e8;
    border-radius:6px;
    background:#f5f6f7;
}

.arc-board .arc-map-embed iframe {
    display:block;
    width:100%;
    height:100%;
    border:0;
}

.arc-board .arc-location-inner.no-address .arc-map-embed {
    height:480px;
}

.arc-board .arc-location-kakao {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    margin-top:16px;
    padding:0 13px;
    border:1px solid #d7dbe0;
    border-radius:5px;
    color:#111 !important;
    background:#fff;
    font-size:12px;
    font-weight:600;
    text-decoration:none !important;
}

.arc-board .arc-location-kakao:hover {
    background:#f6f7f8;
}

@media (max-width:920px) {
    .arc-board .arc-map-embed,
    .arc-board .arc-location-inner.no-address .arc-map-embed {
        height:400px;
    }
}

@media (max-width:720px) {
    .arc-board .arc-map-embed,
    .arc-board .arc-location-inner.no-address .arc-map-embed {
        height:350px;
    }
}


/* =========================================================
   v8 PRODUCTION DATE CALENDAR
   ========================================================= */
.arc-board .arc-date-field {
    display:flex;
    align-items:center;
    gap:12px;
}

.arc-board .arc-date-field input[type="date"] {
    width:220px;
    min-height:44px;
    padding:0 12px;
    border:1px solid #d9dde2;
    border-radius:5px;
    background:#fff;
    color:#111;
    font:inherit;
    font-size:14px;
    box-sizing:border-box;
}

.arc-board .arc-date-field input[type="date"]:focus {
    border-color:#111;
    outline:0;
    box-shadow:0 0 0 2px rgba(17,17,17,.06);
}

.arc-board .arc-date-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor:pointer;
}

.arc-board .arc-date-help {
    color:#777;
    font-size:12px;
}

@media (max-width:720px) {
    .arc-board .arc-date-field {
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .arc-board .arc-date-field input[type="date"] {
        width:100%;
    }
}


/* =========================================================
   v9 CALENDAR ICON SIZE
   ========================================================= */
.arc-board .arc-date-field input[type="date"]::-webkit-calendar-picker-indicator {
    width:20px;
    height:20px;
    padding:3px;
    margin-left:8px;
    cursor:pointer;
    opacity:.9;
}

.arc-board .arc-date-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity:1;
}


/* =========================================================
   UNIFIED GNUBOARD NATIVE FILE SLOT
   ========================================================= */
.arc-board .arc-native-file-slots {
    position:absolute !important;
    left:-99999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

.arc-board .arc-native-file-slot {
    display:block !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
}


/* =========================================================
   VIDEO ARCHIVE v1
   통합 스킨의 영상 카드는 16:9 비율 사용
   ========================================================= */

/* 목록 카드 영상 썸네일 16:9 */
.arc-board.arc-video-list-page .arc-card-thumb,
.arc-board .arc-video-card-thumb {
    aspect-ratio:16/9 !important;
    height:auto !important;
    background:#111;
}

.arc-board .arc-list-video-preview {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#111;
    pointer-events:none;
}

.arc-board .arc-video-cover {
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,.18));
    pointer-events:none;
}

.arc-board .arc-play-video {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    padding-left:3px;
    border-radius:50%;
    background:rgba(0,0,0,.62);
    color:#fff;
    font-size:16px;
    z-index:2;
}

/* 상세 메인 영상 16:9 */
.arc-board .arc-main-media.is-video {
    aspect-ratio:16/9 !important;
    height:auto !important;
    background:#090a0c;
}

.arc-board .arc-main-media.is-video video {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#090a0c;
}

/* 관련 영상도 16:9 */
.arc-board .arc-related-item {
    aspect-ratio:16/9 !important;
    height:auto !important;
    background:#111;
}

.arc-board .arc-video-thumb {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#111;
}

.arc-board .arc-related-video-preview {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#111;
    pointer-events:none;
}

.arc-board .arc-related-video-shade {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.14);
    pointer-events:none;
}

.arc-board .arc-video-thumb-play {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding-left:3px;
    border-radius:50%;
    background:rgba(0,0,0,.62);
    color:#fff;
    font-size:14px;
    z-index:2;
}

/* 업로드 선택 미리보기 16:9 */
.arc-board .arc-upload-card-media {
    aspect-ratio:16/9 !important;
    background:#111;
}

.arc-board .arc-upload-card-media > video {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#111;
}

.arc-board .arc-upload-video-badge {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    padding-left:3px;
    border-radius:50%;
    background:rgba(0,0,0,.60);
    color:#fff;
    font-size:13px;
    pointer-events:none;
}

.arc-board .arc-no-video {
    background:#17191d !important;
    color:#fff !important;
}


/* =========================================================
   VIDEO ARCHIVE v2
   ffmpeg 3-second thumbnail + clean pagination
   ========================================================= */
.arc-board .arc-video-static-thumb,
.arc-board .arc-related-video-static-thumb {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#111;
}

/* Pagination */
.arc-board .arc-paging {
    margin:44px 0 20px !important;
    text-align:center !important;
}

.arc-board .arc-paging .pg_wrap {
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
}

.arc-board .arc-paging .pg_page,
.arc-board .arc-paging .pg_current {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:38px !important;
    height:38px !important;
    margin:0 !important;
    padding:0 10px !important;
    border:1px solid #e0e3e7 !important;
    border-radius:6px !important;
    background:#fff !important;
    color:#555 !important;
    font-size:13px !important;
    font-weight:500 !important;
    line-height:1 !important;
    text-decoration:none !important;
    box-sizing:border-box !important;
}

.arc-board .arc-paging .pg_page:hover {
    border-color:#111 !important;
    color:#111 !important;
    background:#fafafa !important;
}

.arc-board .arc-paging .pg_current {
    border-color:#111827 !important;
    background:#111827 !important;
    color:#fff !important;
    font-weight:700 !important;
}

.arc-board .arc-paging .pg_start,
.arc-board .arc-paging .pg_end,
.arc-board .arc-paging .pg_prev,
.arc-board .arc-paging .pg_next {
    min-width:38px !important;
    padding:0 12px !important;
    overflow:hidden !important;
    text-indent:0 !important;
    background-image:none !important;
}

.arc-board .arc-paging .sound_only,
.arc-board .arc-paging .blind,
.arc-board .arc-paging .sr-only {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

@media (max-width:600px) {
    .arc-board .arc-paging .pg_wrap {
        gap:4px !important;
        flex-wrap:wrap !important;
    }

    .arc-board .arc-paging .pg_page,
    .arc-board .arc-paging .pg_current {
        min-width:34px !important;
        height:34px !important;
        padding:0 8px !important;
        font-size:12px !important;
    }
}


/* Multi uploader JS load safety */
.arc-board .arc-js-required-warning {
    margin:18px 0;
    padding:14px 16px;
    border:1px solid #e0b4b4;
    border-radius:6px;
    background:#fff7f7;
    color:#8b2b2b;
    font-size:13px;
    line-height:1.5;
}


/* =========================================================
   VIDEO ARCHIVE v3 - proxy playback / original resolution
   ========================================================= */

/* File info now has one extra metadata row. Keep existing two-column design. */
.arc-board .arc-file-item #arcFileResolution {
    font-variant-numeric: tabular-nums;
}

/* Fallback shown only when 3-second ffmpeg thumbnail is unavailable. */
.arc-board .arc-related-video-placeholder {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    background:#17191d;
    color:rgba(255,255,255,.72);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
}

/* Browser video itself should not advertise drag/download affordances.
   Security comes from proxy-only src, not from CSS/JS. */
.arc-board .arc-main-media video {
    -webkit-user-drag:none;
    user-select:none;
}


/* =========================================================
   ARC unified - related material selected border fix
   선택되지 않은 썸네일: 테두리 없음
   선택된 썸네일: 2px #111 테두리만 표시
   ========================================================= */
.arc-board .arc-related-item {
    position:relative !important;
    border:0 !important;
    box-shadow:none !important;
}

.arc-board .arc-related-item::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:20;
    border:2px solid transparent;
    border-radius:inherit;
    box-sizing:border-box;
    pointer-events:none;
}

.arc-board .arc-related-item.is-active::after {
    border-color:#111;
}

.arc-board .arc-related-item:focus-visible {
    outline:2px solid #111;
    outline-offset:2px;
}


/* =========================================================
   ARC unified - main detail media 16:9
   사진 상세도 영상과 동일한 16:9 비율로 표시
   ========================================================= */
.arc-board .arc-main-media {
    aspect-ratio:16/9 !important;
    height:auto !important;
    overflow:hidden !important;
    background:#111;
}

.arc-board .arc-main-media img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
}

.arc-board .arc-main-media video {
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    display:block !important;
}


/* ARC unified - selected file statistics */
.arc-board .arc-admin-stat #arcMediaViewStat,
.arc-board .arc-admin-stat #arcMediaDownloadStat {
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   ARC unified - list thumbnail 16:9
   사진/영상 목록 썸네일 비율 통일
   ========================================================= */
.arc-board .arc-card-thumb,
.arc-board.arc-video-list-page .arc-card-thumb,
.arc-board .arc-video-card-thumb {
    aspect-ratio:16/9 !important;
    height:auto !important;
    overflow:hidden !important;
}

.arc-board .arc-card-thumb img,
.arc-board .arc-video-card-thumb img,
.arc-board .arc-card-thumb video,
.arc-board .arc-video-card-thumb video {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}


/* =========================================================
   ARC unified - thin line media type icon
   사진/영상 구분: 배경 없음, 테두리 없음, 흰색 라인 100%
   ========================================================= */

/* 기존 영상 중앙 재생표시/오버레이는 사용하지 않음 */
.arc-board .arc-video-cover,
.arc-board .arc-play-video,
.arc-board .arc-related-video-shade,
.arc-board .arc-video-thumb-play {
    display:none !important;
}

/* 리스트/관련자료 아이콘 공통 */
.arc-board .arc-media-type-icon {
    position:absolute;
    top:10px;
    left:10px;
    z-index:12;
    display:block;
    width:25px;
    height:25px;
    padding:0;
    margin:0;
    color:#fff;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    opacity:1;
    pointer-events:none;
    line-height:0;
}

.arc-board .arc-media-type-icon svg {
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:1.35;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

/* 썸네일 위에 정확히 겹치도록 */
.arc-board .arc-card-thumb,
.arc-board .arc-related-item {
    position:relative !important;
}

/* 관련자료는 작은 썸네일이므로 아이콘도 조금 작게 */
.arc-board .arc-related-item .arc-media-type-icon {
    top:7px;
    left:7px;
    width:20px;
    height:20px;
}

/* 아이콘 자체에는 어떠한 배경도 생성하지 않음 */
.arc-board .arc-media-type-icon::before,
.arc-board .arc-media-type-icon::after {
    content:none !important;
    display:none !important;
}


/* =========================================================
   ARC unified - administrator batch actions + layer modal
   ========================================================= */
.arc-batch-form { margin:0; }
.arc-admin-batchbar {
    display:flex;
    align-items:center;
    gap:16px;
    min-height:58px;
    margin:0 0 20px;
    padding:10px 12px 10px 14px;
    border:1px solid #e2e5e9;
    border-radius:8px;
    background:#fafbfc;
}
.arc-select-all {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#222;
    font-size:13px;
    font-weight:650;
    cursor:pointer;
    user-select:none;
}
.arc-select-all input,
.arc-card-select input {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.arc-check-ui {
    position:relative;
    flex:0 0 auto;
    width:20px;
    height:20px;
    box-sizing:border-box;
    border:1px solid #b9c0c8;
    border-radius:5px;
    background:#fff;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.arc-select-all input:checked + .arc-check-ui,
.arc-card-select input:checked + .arc-check-ui {
    border-color:#111827;
    background:#111827;
}
.arc-select-all input:checked + .arc-check-ui::after,
.arc-card-select input:checked + .arc-check-ui::after {
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
.arc-select-all input:indeterminate + .arc-check-ui {
    border-color:#111827;
    background:#111827;
}
.arc-select-all input:indeterminate + .arc-check-ui::after {
    content:"";
    position:absolute;
    left:4px;
    right:4px;
    top:8px;
    height:2px;
    border-radius:2px;
    background:#fff;
}
.arc-select-all input:focus-visible + .arc-check-ui,
.arc-card-select input:focus-visible + .arc-check-ui {
    box-shadow:0 0 0 3px rgba(17,24,39,.16);
}
.arc-batch-status {
    margin-right:auto;
    color:#747b84;
    font-size:12px;
}
.arc-batch-status strong { color:#111827; font-weight:750; }
.arc-batch-actions { display:flex; align-items:center; gap:7px; }
.arc-batch-btn { min-width:76px; height:38px; padding:0 13px; font-size:13px; }
.arc-batch-delete { color:#a51d17 !important; border-color:#e5c8c5; }
.arc-batch-delete:hover { background:#fff7f6; border-color:#cfaaa6; }

.arc-card { position:relative; }
.arc-card-select {
    position:absolute;
    top:10px;
    right:10px;
    z-index:30;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:6px;
    background:rgba(255,255,255,.90);
    box-shadow:0 1px 5px rgba(0,0,0,.15);
    cursor:pointer;
    opacity:.85;
    transition:opacity .15s ease, transform .15s ease, background .15s ease;
}
.arc-card-select:hover { opacity:1; transform:translateY(-1px); }
.arc-card-select .arc-check-ui { width:19px; height:19px; }
.arc-card.is-selected .arc-card-thumb { box-shadow:inset 0 0 0 3px #111827; }
.arc-card.is-selected .arc-card-select { opacity:1; background:#fff; }

.arc-btn-delete { color:#a51d17 !important; border-color:#e5c8c5; }
.arc-btn-delete:hover { background:#fff7f6; border-color:#cfaaa6; }

html.arc-modal-open,
html.arc-modal-open body { overflow:hidden; }
.arc-confirm-layer {
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .16s ease, visibility .16s ease;
}
.arc-confirm-layer.is-open {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}
.arc-confirm-backdrop {
    position:absolute;
    inset:0;
    background:rgba(17,24,39,.48);
    backdrop-filter:blur(2px);
}
.arc-confirm-dialog {
    position:relative;
    z-index:1;
    width:min(430px, calc(100vw - 40px));
    box-sizing:border-box;
    padding:30px 30px 24px;
    border:1px solid rgba(17,24,39,.08);
    border-radius:16px;
    background:#fff;
    box-shadow:0 24px 70px rgba(17,24,39,.24);
    text-align:center;
    transform:translateY(8px) scale(.985);
    transition:transform .16s ease;
}
.arc-confirm-layer.is-open .arc-confirm-dialog { transform:translateY(0) scale(1); }
.arc-confirm-icon {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    margin:0 auto 17px;
    border-radius:50%;
    background:#fff0ee;
    color:#b42318;
    font-size:23px;
    font-weight:800;
}
.arc-confirm-dialog h2 {
    margin:0;
    color:#111827;
    font-size:20px;
    line-height:1.4;
    font-weight:800;
    letter-spacing:-.025em;
}
.arc-confirm-dialog p {
    margin:11px auto 0;
    max-width:340px;
    color:#69707a;
    font-size:14px;
    line-height:1.65;
    word-break:keep-all;
}
.arc-confirm-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:25px;
}
.arc-confirm-actions button {
    height:44px;
    border-radius:7px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
.arc-confirm-cancel {
    border:1px solid #d8dde3;
    background:#fff;
    color:#333;
}
.arc-confirm-cancel:hover { background:#f7f8fa; }
.arc-confirm-ok {
    border:1px solid #111827;
    background:#111827;
    color:#fff;
}
.arc-confirm-ok:hover { background:#202a3b; }
.arc-confirm-actions button:focus-visible { outline:3px solid rgba(37,99,235,.24); outline-offset:2px; }

@media (max-width:700px) {
    .arc-admin-batchbar { align-items:flex-start; flex-wrap:wrap; gap:10px; }
    .arc-batch-status { order:3; width:100%; }
    .arc-batch-actions { width:100%; }
    .arc-batch-btn { flex:1; }
    .arc-card-select { top:8px; right:8px; }
    .arc-confirm-dialog { padding:26px 20px 20px; }
}


/* =========================================================
   ARC unified - 1920 preview image + in-page lightbox
   원본 사진은 다운로드에만 사용하고 화면에는 보기용 이미지만 표시
   ========================================================= */
.arc-board .arc-main-media.is-photo .arc-lightbox-trigger {
    cursor:zoom-in;
}

html.arc-lightbox-open,
html.arc-lightbox-open body {
    overflow:hidden;
}

.arc-image-lightbox {
    position:fixed;
    inset:0;
    z-index:100500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease;
}

.arc-image-lightbox.is-open {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.arc-image-lightbox-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(2px);
}

.arc-image-lightbox-dialog {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(1920px, calc(100vw - 48px));
    height:min(1080px, calc(100vh - 48px));
    max-width:100%;
    max-height:100%;
    outline:0;
}

.arc-image-lightbox-stage {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}

.arc-image-lightbox-img {
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    box-shadow:0 18px 60px rgba(0,0,0,.38);
}

.arc-image-lightbox-close {
    position:absolute;
    top:0;
    right:0;
    z-index:3;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.13);
    color:#fff;
    font-size:30px;
    font-weight:300;
    line-height:1;
    cursor:pointer;
    transition:background .15s ease;
}
.arc-image-lightbox-close:hover { background:rgba(255,255,255,.22); }
.arc-image-lightbox-close:focus-visible { outline:2px solid #fff; outline-offset:3px; }

@media (max-width:700px) {
    .arc-image-lightbox { padding:14px; }
    .arc-image-lightbox-dialog {
        width:calc(100vw - 28px);
        height:calc(100vh - 28px);
    }
    .arc-image-lightbox-close {
        top:4px;
        right:4px;
        width:42px;
        height:42px;
        background:rgba(0,0,0,.46);
    }
}

/* 공유 레이어 — 아이콘은 옆으로 슬라이드하지 않는다(가로 스크롤 금지).
   채널이 적어(4개) flex-wrap 한 줄에 다 들어가고, 나중에 늘어나도
   다음 줄로 접힐 뿐 스크롤바는 생기지 않는다. */
.arc-share-layer {
    position:fixed;
    inset:0;
    z-index:100500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    box-sizing:border-box;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease;
}
.arc-share-layer.is-open {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}
.arc-share-backdrop {
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(2px);
}
.arc-share-dialog {
    position:relative;
    z-index:1;
    width:min(400px, 100%);
    background:#fff;
    border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    padding:20px 20px 18px;
}
.arc-share-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}
.arc-share-head span {
    font-size:16px;
    font-weight:700;
    color:#0f172a;
}
.arc-share-x {
    width:26px;
    height:26px;
    border-radius:50%;
    border:0;
    background:#f1f4f9;
    color:#64748b;
    font-size:14px;
    line-height:26px;
    text-align:center;
    padding:0;
    cursor:pointer;
}
.arc-share-x:hover { background:#e2e8f0; }

.arc-share-icons {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px 10px;
    margin:0 0 18px;
}
.arc-share-icon {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    width:58px;
    border:0;
    background:none;
    padding:0;
    cursor:pointer;
}
.arc-share-circle {
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
}
.arc-share-circle svg { width:22px; height:22px; }
.arc-share-label {
    font-size:10.5px;
    color:#475569;
    white-space:nowrap;
}
.arc-share-icon:hover .arc-share-circle { filter:brightness(0.94); }

.arc-share-linkrow {
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid #e2e8f0;
    border-radius:999px;
    padding:4px 4px 4px 14px;
}
.arc-share-url {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    color:#334155;
}
.arc-share-copy {
    flex:none;
    border:0;
    background:#0f172a;
    color:#fff;
    font-size:12.5px;
    font-weight:600;
    padding:9px 16px;
    border-radius:999px;
    cursor:pointer;
}
.arc-share-copy:hover { background:#1e293b; }

@media (max-width:480px) {
    .arc-share-dialog { padding:18px 16px 16px; }
    .arc-share-icons { gap:12px 8px; }
}

/* 다운로드 전 사용목적·사용처 — css/arc_download_intent.css (공용 모듈) 로 옮김 */


/* ARC KOGL final layout
   - desktop: title stays on one line
   - summary + OPEN image on second row
   - condition pills on third row
*/
.arc-kogl-layout-final .arc-kogl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.arc-kogl-layout-final .arc-kogl-head h2 {
    margin: 0;
}

.arc-kogl-layout-final .arc-kogl-head > span {
    color: #8b919b;
    font-size: 13px;
    white-space: nowrap;
}

.arc-kogl-layout-final .arc-kogl-card-final {
    margin-top: 12px;
    padding: 16px 18px;
    border: 1px solid #dfe4ea;
    border-radius: 8px;
    background: #fff;
}

.arc-kogl-layout-final .arc-kogl-title-final {
    display: block;
    margin: 0 0 12px;
    color: #111;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;
    white-space: nowrap;
}


/* 영문 표기는 한국어보다 훨씬 길다 —
   '제4유형 · 출처표시 + 상업적 이용금지 + 변경금지' 가
   'Type 4 · Attribution + No Commercial Use + No Derivatives' 가 된다.
   한 줄 고정을 풀고 글자를 조금 줄여 칸 안에 들어오게 한다. */
html[lang="en"] .arc-kogl-layout-final .arc-kogl-title-final {
    font-size: 14px;
    white-space: normal;
}
.arc-kogl-layout-final .arc-kogl-middle-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.arc-kogl-layout-final .arc-kogl-summary-final {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.65;
}

.arc-kogl-layout-final .arc-kogl-image-final {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 150px;
    height: auto;
    object-fit: contain;
}

.arc-kogl-layout-final .arc-kogl-tags-final {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.arc-kogl-layout-final .arc-kogl-tags-final span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #dfe4ea;
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

/* 기존 공공누리 CSS가 새 레이아웃 내부에 침범하지 않도록 제한 */
.arc-kogl-layout-final .arc-kogl-card-final .arc-kogl-image-final {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.arc-kogl-layout-final .arc-kogl-tags-final span::before,
.arc-kogl-layout-final .arc-kogl-tags-final span::after {
    content: none !important;
}

@media (max-width: 980px) {
    .arc-kogl-layout-final .arc-kogl-title-final {
        white-space: normal;
    }

    .arc-kogl-layout-final .arc-kogl-middle-final {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .arc-kogl-layout-final .arc-kogl-image-final {
        max-width: 150px;
    }
}

@media (max-width: 640px) {
    .arc-kogl-layout-final .arc-kogl-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .arc-kogl-layout-final .arc-kogl-card-final {
        padding: 14px;
    }
}


/* =========================================================
   ARC lightbox gallery navigation
   ========================================================= */
.arc-image-lightbox-img {
    cursor: zoom-out;
}

.arc-image-lightbox-nav {
    position: fixed;
    top: 50%;
    z-index: 100503;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0 0 5px;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    background: rgba(20,20,20,.56);
    color: #fff;
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.arc-image-lightbox-nav:hover {
    background: rgba(20,20,20,.82);
}

.arc-image-lightbox-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.arc-image-lightbox-nav[hidden] {
    display: none !important;
}

.arc-image-lightbox-prev {
    left: 24px;
}

.arc-image-lightbox-next {
    right: 24px;
}

@media (max-width: 700px) {
    .arc-image-lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 34px;
        background: rgba(20,20,20,.68);
    }

    .arc-image-lightbox-prev {
        left: 10px;
    }

    .arc-image-lightbox-next {
        right: 10px;
    }
}


/* =========================================================
   ARC AI-FIRST ARCHIVE WRITE WORKFLOW
   ========================================================= */
.arc-ai-write-page {
    --arc-ai-blue:#2563eb;
    --arc-ai-green:#18a957;
    --arc-ai-purple:#7657e8;
    --arc-ai-border:#e2e6ec;
    --arc-ai-soft:#f7f8fa;
}

.arc-ai-stepper {
    display:flex;
    align-items:center;
    width:100%;
    margin:20px 0 34px;
    padding:0 10px;
    box-sizing:border-box;
}

.arc-ai-stepper > i {
    flex:1 1 auto;
    height:1px;
    margin:0 14px;
    background:#d9dde4;
}

.arc-ai-step {
    display:flex;
    align-items:center;
    gap:8px;
    color:#858b94;
    white-space:nowrap;
}

.arc-ai-step > span {
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border:2px solid #a6abb2;
    border-radius:50%;
    background:#fff;
    font-size:12px;
    font-weight:800;
}

.arc-ai-step > strong {
    font-size:14px;
    font-weight:700;
}

.arc-ai-step.is-active { color:#111827; }
.arc-ai-step.is-active > span {
    border-color:var(--arc-ai-blue);
    background:var(--arc-ai-blue);
    color:#fff;
}
.arc-ai-step.is-done { color:#3f4752; }
.arc-ai-step.is-done > span {
    border-color:var(--arc-ai-green);
    background:var(--arc-ai-green);
    color:#fff;
}
.arc-ai-step.is-done > span::after { content:'✓'; }
.arc-ai-step.is-done > span { font-size:0; }

.arc-ai-upload-first {
    margin-bottom:24px;
}

.arc-ai-upload-first .arc-dropzone {
    min-height:360px;
    border:1px dashed #cfd5dd;
    border-radius:10px;
    background:#fff;
}

.arc-ai-upload-first .arc-dropzone:hover,
.arc-ai-upload-first .arc-dropzone.is-dragover {
    border-color:var(--arc-ai-blue);
    background:#f7faff;
}

.arc-ai-upload-icon {
    width:88px;
    height:88px;
    display:grid;
    place-items:center;
    margin-bottom:16px;
    border-radius:50%;
    background:#f1f2f4;
}

.arc-ai-upload-icon svg {
    width:50px;
    height:50px;
    fill:none;
    stroke:#6f747b;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.arc-ai-upload-first .arc-dropzone strong {
    font-size:17px;
}

.arc-ai-upload-first .arc-file-pick {
    min-width:92px;
    padding:11px 18px;
    border-radius:999px;
    background:#111;
    color:#fff;
    font-weight:700;
}

.arc-ai-upload-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}

.arc-ai-upload-actions .arc-ai-start {
    min-width:180px;
}

.arc-ai-progress-panel {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(330px, .7fr);
    gap:28px;
    margin:22px 0;
    padding:30px;
    border:1px solid var(--arc-ai-border);
    border-radius:12px;
    background:#fff;
}

.arc-ai-progress-panel[hidden] { display:none !important; }

.arc-ai-progress-main {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:330px;
    text-align:center;
}

.arc-ai-orb {
    width:92px;
    height:92px;
    display:grid;
    place-items:center;
    margin-bottom:20px;
    border-radius:50%;
    background:#f2efff;
    color:var(--arc-ai-purple);
}

.arc-ai-orb svg {
    width:48px;
    height:48px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;
}

.arc-ai-progress-main h2 {
    margin:0 0 8px;
    font-size:22px;
    line-height:1.35;
}

.arc-ai-progress-main p {
    margin:0 0 22px;
    color:#6b7280;
    font-size:14px;
}

.arc-ai-progress-bar {
    width:min(420px, 90%);
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:#eceef2;
}

.arc-ai-progress-bar span {
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--arc-ai-blue);
    transition:width .3s ease;
}

.arc-ai-progress-main > strong {
    margin-top:8px;
    color:#4b5563;
    font-size:13px;
}

.arc-ai-process-list {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    margin:0;
    padding:0;
    list-style:none;
}

.arc-ai-process-list li {
    display:grid;
    grid-template-columns:24px 1fr auto;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:0 8px;
    border-radius:7px;
    color:#7a8088;
}

.arc-ai-process-list li > span {
    width:20px;
    height:20px;
    box-sizing:border-box;
    border:2px solid #c7cbd1;
    border-radius:50%;
}

.arc-ai-process-list li strong {
    font-size:13px;
    font-weight:650;
}

.arc-ai-process-list li em {
    color:#969ba2;
    font-size:11px;
    font-style:normal;
}

.arc-ai-process-list li.is-running {
    background:#f6f8ff;
    color:#1f4fc4;
}
.arc-ai-process-list li.is-running > span {
    border-color:var(--arc-ai-blue);
    border-top-color:transparent;
    animation:arcAiSpin .8s linear infinite;
}
.arc-ai-process-list li.is-done { color:#245f3e; }
.arc-ai-process-list li.is-done > span {
    display:grid;
    place-items:center;
    border-color:var(--arc-ai-green);
    background:var(--arc-ai-green);
    color:#fff;
}
.arc-ai-process-list li.is-done > span::after {
    content:'✓';
    font-size:12px;
    font-weight:800;
}
.arc-ai-process-list li.is-error { color:#b42318; }
.arc-ai-process-list li.is-error > span {
    border-color:#d92d20;
    background:#d92d20;
}
.arc-ai-process-list li.is-error > span::after {
    content:'!';
    display:grid;
    place-items:center;
    color:#fff;
    font-size:12px;
    font-weight:900;
}

@keyframes arcAiSpin { to { transform:rotate(360deg); } }

.arc-ai-processed-files {
    grid-column:1 / -1;
    padding-top:20px;
    border-top:1px solid #eceef2;
}

.arc-ai-processed-files > strong {
    display:block;
    margin-bottom:10px;
    font-size:13px;
}

.arc-ai-processed-files ul {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
}

.arc-ai-processed-files li {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:2px 9px;
    align-items:center;
    min-width:0;
    padding:9px 11px;
    border-radius:8px;
    background:#f7f8fa;
}

.arc-ai-file-type {
    grid-row:1 / 3;
    min-width:48px;
    padding:5px 7px;
    border-radius:5px;
    background:#111827;
    color:#fff;
    text-align:center;
    font-size:9px;
    font-weight:800;
}

.arc-ai-processed-files li strong {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
}

.arc-ai-processed-files li em {
    color:#777e87;
    font-size:11px;
    font-style:normal;
}

.arc-ai-details {
    margin-top:24px;
    padding-top:4px;
}

.arc-ai-details[hidden] { display:none !important; }

.arc-ai-details-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
    padding:20px 22px;
    border:1px solid #e7e2ff;
    border-radius:10px;
    background:#fbfaff;
}

.arc-ai-details-head h2 {
    margin:5px 0 4px;
    font-size:22px;
}

.arc-ai-details-head p {
    margin:0;
    color:#6b7280;
    font-size:13px;
}

.arc-ai-recommend-chip,
.arc-ai-field label > small {
    display:inline-flex;
    align-items:center;
    min-height:21px;
    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    background:#efeaff;
    color:#6847d8;
    font-size:10px;
    font-weight:800;
    vertical-align:middle;
}

.arc-ai-recommend-chip { margin-left:0; }

.arc-ai-field label > small.is-low-confidence,
#arcAiLocationBadge.is-low-confidence {
    background:#fff1e8;
    color:#b54708;
}

.arc-ai-final-actions {
    margin-top:30px;
}

.arc-save-success {
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 20px;
    padding:18px 20px;
    border:1px solid #bfe8ce;
    border-radius:10px;
    background:#f3fff7;
}

.arc-save-success > span {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#19a957;
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.arc-save-success strong {
    display:block;
    margin-bottom:2px;
    font-size:16px;
}

.arc-save-success p {
    margin:0;
    color:#52705e;
    font-size:12px;
}

@media (max-width:900px) {
    .arc-ai-stepper {
        overflow-x:auto;
        padding-bottom:8px;
    }
    .arc-ai-step > strong { font-size:12px; }
    .arc-ai-stepper > i { min-width:28px; margin:0 7px; }
    .arc-ai-progress-panel { grid-template-columns:1fr; }
    .arc-ai-progress-main { min-height:250px; }
    .arc-ai-processed-files ul { grid-template-columns:1fr; }
}

@media (max-width:640px) {
    .arc-ai-upload-first .arc-dropzone { min-height:300px; }
    .arc-ai-upload-actions { flex-direction:column; }
    .arc-ai-upload-actions .arc-btn { width:100%; }
    .arc-ai-progress-panel { padding:20px 16px; }
    .arc-ai-details-head { flex-direction:column; }
    .arc-ai-details-head .arc-btn { width:100%; }
}


/* =========================================================
   ARC AI UPLOAD UX v2
   - 선택 썸네일을 업로드 박스 내부 하단 반투명 레이어에 표시
   - 업로드 / 분석 / 정보확인 화면을 단계별 단독 표시
   ========================================================= */

.arc-ai-upload-first[hidden] {
    display:none !important;
}

/* 선택 파일이 있어도 드롭존 높이가 아래로 늘어나지 않게 고정 */
.arc-ai-upload-first .arc-dropzone {
    overflow:hidden;
}

.arc-ai-upload-first .arc-dropzone.has-files {
    min-height:360px;
    padding-bottom:150px;
}

/* JS가 summary + preview를 이 레이어 안으로 이동 */
.arc-ai-upload-first .arc-upload-overlay {
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:4;
    box-sizing:border-box;
    padding:8px 10px 10px;
    border:1px solid rgba(255,255,255,.58);
    border-radius:10px;
    background:rgba(255,255,255,.72);
    box-shadow:0 8px 24px rgba(15,23,42,.10);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    text-align:left;
}

.arc-ai-upload-first .arc-upload-overlay[hidden] {
    display:none !important;
}

.arc-ai-upload-first .arc-upload-overlay .arc-selected-summary {
    min-height:24px;
    margin:0 0 6px;
    padding:0 2px;
    gap:8px;
    background:transparent;
    font-size:11px;
}

.arc-ai-upload-first .arc-upload-overlay .arc-selected-summary button {
    flex:0 0 auto;
    margin-left:auto;
}

/* 세로 그리드 대신 한 줄 썸네일 트레이 */
.arc-ai-upload-first .arc-upload-overlay .arc-upload-preview {
    display:flex;
    grid-template-columns:none;
    gap:8px;
    width:100%;
    margin:0;
    padding:0 0 2px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:thin;
}

.arc-ai-upload-first .arc-upload-overlay .arc-upload-card {
    flex:0 0 112px;
    width:112px;
    border-color:rgba(15,23,42,.14);
    border-radius:7px;
    background:rgba(255,255,255,.92);
    box-shadow:0 2px 7px rgba(15,23,42,.08);
}

.arc-ai-upload-first .arc-upload-overlay .arc-upload-card-media {
    height:66px;
    aspect-ratio:auto;
}

.arc-ai-upload-first .arc-upload-overlay .arc-upload-card-info {
    display:none;
}

.arc-ai-upload-first .arc-upload-overlay .arc-upload-order {
    left:5px;
    top:5px;
    min-width:22px;
    height:22px;
    padding:0 5px;
    font-size:9px;
}

.arc-ai-upload-first .arc-upload-overlay .arc-upload-remove {
    top:4px;
    right:4px;
    width:24px;
    height:24px;
    font-size:19px;
}

/* 파일 선택 전과 후 모두 중앙 선택 버튼은 그대로 보이게 유지 */
.arc-ai-upload-first .arc-dropzone.has-files .arc-ai-upload-icon {
    width:70px;
    height:70px;
    margin-bottom:8px;
}

.arc-ai-upload-first .arc-dropzone.has-files .arc-ai-upload-icon svg {
    width:40px;
    height:40px;
}

.arc-ai-upload-first .arc-dropzone.has-files > strong {
    font-size:15px;
}

.arc-ai-upload-first .arc-dropzone.has-files > small {
    font-size:11px;
}

/* 단계전환 시 현재 단계만 화면에 존재하는 느낌을 강화 */
.arc-ai-progress-panel:not([hidden]),
.arc-ai-details:not([hidden]) {
    animation:arcAiStageIn .22s ease-out both;
}

@keyframes arcAiStageIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

@media (max-width:640px) {
    .arc-ai-upload-first .arc-dropzone.has-files {
        min-height:330px;
        padding-bottom:136px;
    }

    .arc-ai-upload-first .arc-upload-overlay {
        left:9px;
        right:9px;
        bottom:9px;
        padding:7px;
    }

    .arc-ai-upload-first .arc-upload-overlay .arc-upload-card {
        flex-basis:96px;
        width:96px;
    }

    .arc-ai-upload-first .arc-upload-overlay .arc-upload-card-media {
        height:58px;
    }
}


/* =========================================================
   ARC AI UPLOAD FINAL UX v3
   JPG/JPEG <= 10MB / MP4 <= 100MB
   ========================================================= */

/* 이전 v2 오버레이 방식 무효화 */
.arc-ai-upload-first .arc-upload-overlay {
    display:none !important;
}

.arc-ai-upload-first .arc-upload-workspace {
    display:block;
    width:100%;
}

.arc-ai-upload-first .arc-dropzone {
    position:relative;
    min-height:230px !important;
    height:230px;
    padding:24px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    overflow:hidden;
}

.arc-ai-upload-first .arc-dropzone > span {
    display:none !important;
}

.arc-ai-upload-first .arc-ai-upload-icon {
    width:66px !important;
    height:66px !important;
    margin:0 0 4px !important;
}

.arc-ai-upload-first .arc-ai-upload-icon svg {
    width:36px !important;
    height:36px !important;
}

.arc-ai-upload-first .arc-dropzone > strong {
    font-size:16px !important;
    line-height:1.4;
}

.arc-ai-upload-first .arc-file-pick {
    margin:0;
}

.arc-ai-upload-first .arc-upload-limit-note {
    display:block;
    margin-top:2px;
    color:#8a9099;
    font-size:11px;
}

/* 파일 선택 시 한 박스 안에서 좌/우 50:50 */
.arc-ai-upload-first .arc-upload-workspace.has-files {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:0;
    min-height:278px;
    overflow:hidden;
    border:1px solid #dce1e8;
    border-radius:10px;
    background:#fff;
}

.arc-ai-upload-first .arc-upload-workspace.has-files .arc-dropzone {
    height:278px;
    min-height:278px !important;
    border:0 !important;
    border-right:1px solid #e4e7eb !important;
    border-radius:0;
    background:#fbfcfe;
}

.arc-ai-upload-first .arc-upload-files-pane {
    min-width:0;
    height:278px;
    padding:14px;
    overflow:hidden;
    background:#fff;
}

.arc-ai-upload-first .arc-upload-files-pane[hidden] {
    display:none !important;
}

.arc-ai-upload-first .arc-selected-summary {
    display:flex;
    align-items:center;
    min-height:32px;
    margin:0 0 10px;
    padding:0 2px 8px;
    border-bottom:1px solid #eceff3;
    background:transparent;
    font-size:12px;
}

.arc-ai-upload-first .arc-selected-summary[hidden] {
    display:none !important;
}

.arc-ai-upload-first .arc-selected-summary #arcSelectedSize {
    margin-left:8px;
    color:#7b818a;
}

.arc-ai-upload-first .arc-selected-summary button {
    margin-left:auto;
}

.arc-ai-upload-first .arc-upload-files-pane .arc-upload-preview {
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:9px !important;
    width:100%;
    height:210px;
    margin:0 !important;
    padding:0 3px 4px 0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    align-content:start;
}

.arc-ai-upload-first .arc-upload-files-pane .arc-upload-card {
    width:auto !important;
    min-width:0;
    border-radius:7px;
    overflow:hidden;
}

.arc-ai-upload-first .arc-upload-files-pane .arc-upload-card-media {
    height:auto !important;
    aspect-ratio:16/9;
}

.arc-ai-upload-first .arc-upload-files-pane .arc-upload-card-info {
    display:block !important;
    padding:6px 7px 7px;
}

.arc-ai-upload-first .arc-upload-files-pane .arc-upload-card-info strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
}

.arc-ai-upload-first .arc-upload-files-pane .arc-upload-card-info span {
    font-size:9px;
    color:#818791;
}

.arc-ai-upload-actions {
    margin-top:14px !important;
}

.arc-ai-upload-first .arc-upload-help {
    display:none !important;
}

/* 분석 화면을 더 작고 간결하게 */
.arc-ai-progress-panel {
    grid-template-columns:minmax(0, .9fr) minmax(320px, 1.1fr) !important;
    gap:24px !important;
    padding:22px 26px !important;
    min-height:0 !important;
}

.arc-ai-progress-main {
    min-height:220px !important;
}

.arc-ai-orb {
    width:72px !important;
    height:72px !important;
    margin-bottom:14px !important;
}

.arc-ai-orb svg {
    width:40px !important;
    height:40px !important;
}

.arc-ai-progress-main h2 {
    font-size:20px !important;
}

.arc-ai-progress-main p {
    margin-bottom:16px !important;
}

.arc-ai-processed-files {
    display:none !important;
}

/* 내용 편집 영역 간소화 */
.arc-ai-details .sound_only,
.arc-ai-details .sound-only {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.arc-ai-details #wr_content,
.arc-ai-details textarea[name="wr_content"] {
    min-height:140px !important;
    height:140px !important;
    resize:vertical;
}

.arc-ai-details iframe {
    max-height:180px !important;
}

@media (max-width:900px) {
    .arc-ai-upload-first .arc-upload-workspace.has-files {
        grid-template-columns:1fr;
    }

    .arc-ai-upload-first .arc-upload-workspace.has-files .arc-dropzone {
        height:200px;
        min-height:200px !important;
        border-right:0 !important;
        border-bottom:1px solid #e4e7eb !important;
    }

    .arc-ai-upload-first .arc-upload-files-pane {
        height:278px;
    }

    .arc-ai-progress-panel {
        grid-template-columns:1fr !important;
    }

    .arc-ai-progress-main {
        min-height:180px !important;
    }
}

@media (max-width:640px) {
    .arc-ai-upload-first .arc-dropzone {
        height:210px;
        min-height:210px !important;
    }

    .arc-ai-upload-first .arc-upload-files-pane .arc-upload-preview {
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }
}

/* =====================================================
   관리자 전용 AI 메타 확인 패널 - 상세페이지(view.skin.php)
   ===================================================== */
.arc-save-ai-result { margin-top:5px; color:#274c77; font-size:12px; font-weight:700; }
.arc-admin-ai-panel { margin:32px 0; border:1px solid #dce4ee; border-radius:8px; background:#f8fafc; }
.arc-admin-ai-panel summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; color:#102746; cursor:pointer; list-style:none; }
.arc-admin-ai-panel summary::-webkit-details-marker { display:none; }
.arc-admin-ai-panel summary::after { content:'⌄'; margin-left:8px; font-size:20px; line-height:1; transition:transform .18s ease; }
.arc-admin-ai-panel[open] summary::after { transform:rotate(180deg); }
.arc-admin-ai-panel summary>span:first-child { display:flex; align-items:center; gap:9px; }
.arc-admin-ai-panel summary b { font-size:16px; }
.arc-admin-ai-panel summary small { padding:3px 7px; border-radius:999px; background:#102746; color:#fff; font-size:11px; font-weight:700; }
.arc-admin-ai-summary { margin-left:auto; color:#52606d; font-size:13px; font-weight:700; }
.arc-admin-ai-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 18px 16px; }
.arc-admin-ai-status-grid>div { min-width:0; padding:11px 10px; border:1px solid #e1e7ef; border-radius:6px; background:#fff; }
.arc-admin-ai-status-grid b { display:block; margin-bottom:4px; color:#6b7280; font-size:11px; font-weight:700; }
.arc-admin-ai-status-grid span { display:block; overflow:hidden; color:#172033; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.arc-admin-ai-detail { margin:0 18px 18px; padding:16px; border:1px solid #e1e7ef; border-radius:6px; background:#fff; }
.arc-admin-ai-detail h2 { margin:0 0 12px !important; color:#102746 !important; font-size:14px !important; font-weight:800 !important; }
.arc-admin-ai-detail>dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; margin:0; }
.arc-admin-ai-detail>dl>div { display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; padding:8px 0; border-top:1px solid #edf0f3; font-size:13px; line-height:1.55; }
.arc-admin-ai-detail>dl>div:nth-child(-n+2) { border-top:0; }
.arc-admin-ai-detail>dl>div.is-wide { grid-column:1/-1; }
.arc-admin-ai-detail dt { color:#667085; font-weight:700; }
.arc-admin-ai-detail dd { margin:0; color:#293241; overflow-wrap:anywhere; }
.arc-admin-ai-empty { margin:0; padding:0 18px 18px; color:#667085; font-size:13px; }
.arc-admin-ai-media-list { display:grid; gap:10px; }
.arc-admin-ai-media { border:1px solid #e5e9ef; border-radius:6px; overflow:hidden; }
.arc-admin-ai-media-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px 12px; background:#fbfcfd; }
.arc-admin-ai-media-head strong { color:#102746; font-size:12px; }
.arc-admin-ai-media-head span { overflow:hidden; color:#344054; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.arc-admin-ai-media-head em { padding:3px 7px; border-radius:999px; font-size:11px; font-style:normal; font-weight:800; }
.arc-admin-ai-media-head .is-done { background:#e9f8ee; color:#237345; }
.arc-admin-ai-media-head .is-partial { background:#fff7e5; color:#9a6700; }
.arc-admin-ai-media-head .is-failed { background:#ffebeb; color:#b42318; }
.arc-admin-ai-media-head .is-unanalyzed { background:#eef1f5; color:#667085; }
.arc-admin-ai-media-head .is-pending { background:#edf4ff; color:#275da8; }
.arc-admin-ai-media-head .is-processing { background:#f1edff; color:#6941c6; }
.arc-admin-ai-media dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px; margin:0; padding:0 12px 10px; }
.arc-admin-ai-media dl>div { min-width:0; padding-top:10px; font-size:12px; line-height:1.5; }
.arc-admin-ai-media dt { margin-bottom:3px; color:#667085; font-weight:700; }
.arc-admin-ai-media dd { margin:0; color:#344054; overflow-wrap:anywhere; }
.arc-admin-ai-media .is-error { grid-column:1/-1; padding:9px; border:1px solid #ffd0d0; border-radius:4px; background:#fff7f7; }
.arc-admin-ai-media .is-error dt { color:#b42318; }
.arc-admin-ai-media .is-error dd { color:#8f1d18; }
@media (max-width:1023px) { .arc-admin-ai-status-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:767px) { .arc-admin-ai-panel { margin:24px 0; } .arc-admin-ai-panel summary { align-items:flex-start; padding:14px; } .arc-admin-ai-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 14px 14px; } .arc-admin-ai-detail { margin:0 14px 14px; padding:13px; } .arc-admin-ai-detail>dl { grid-template-columns:1fr; } .arc-admin-ai-detail>dl>div { border-top:1px solid #edf0f3 !important; } .arc-admin-ai-detail>dl>div:first-child { border-top:0 !important; } .arc-admin-ai-media dl { grid-template-columns:1fr; } }
/* 관리자 전용 AI 첨부파일 메타 - 카드 여백 및 항목 구분 */
.arc-admin-ai-media-list { gap:9px; }
.arc-admin-ai-media { border-color:#dce4ee; box-shadow:0 1px 2px rgba(16,39,70,.03); }
.arc-admin-ai-media-head { min-height:44px; padding:10px 14px; border-bottom:1px solid rgba(16,39,70,.08); }
.arc-admin-ai-media-head strong { min-width:52px; }
.arc-admin-ai-media dl { gap:0; padding:0 14px 10px; }
.arc-admin-ai-media dl>div { position:relative; padding:10px 14px 3px; }
.arc-admin-ai-media dl>div+div { border-left:0; }
.arc-admin-ai-media dl>div+div::before { position:absolute; top:10px; bottom:8px; left:0; width:1px; background:rgba(16,39,70,.14); content:''; }
.arc-admin-ai-media dt { margin-bottom:4px; }
.arc-admin-ai-media dd { min-height:26px; }
.arc-admin-ai-media .is-error { margin-top:8px; }
@media (max-width:767px) { .arc-admin-ai-media dl { padding:0 12px 12px; } .arc-admin-ai-media dl>div { padding:11px 0; } .arc-admin-ai-media dl>div+div { border-top:1px solid rgba(16,39,70,.11); border-left:0; } .arc-admin-ai-media dd { min-height:0; } }
/* Phase 4: similar materials (detail page, public) */
.arc-similar-materials { margin-top:38px; padding-top:28px; border-top:1px solid #dfe2e6; }
.arc-similar-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:15px; }
.arc-similar-head h2 { margin:0 !important; color:#111 !important; font-size:22px !important; font-weight:800 !important; line-height:1.3 !important; }
.arc-similar-head p { margin:5px 0 0; color:#667085; font-size:13px; }
.arc-similar-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.arc-similar-card { display:block; min-width:0; color:#111 !important; text-decoration:none !important; }
.arc-similar-thumb { position:relative; display:block; overflow:hidden; aspect-ratio:4/3; border-radius:5px; background:#edf0f4; }
.arc-similar-thumb img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .2s ease; }
.arc-similar-card:hover .arc-similar-thumb img { transform:scale(1.03); }
.arc-similar-thumb.is-empty { display:grid; place-items:center; color:#667085; font-size:12px; }
.arc-similar-thumb em { position:absolute; top:9px; left:9px; padding:4px 7px; border-radius:999px; background:rgba(16,24,40,.76); color:#fff; font-size:11px; font-style:normal; font-weight:700; line-height:1; }
.arc-similar-copy { display:block; padding:10px 1px 0; }
.arc-similar-copy strong { display:block; overflow:hidden; color:#111; font-size:14px; font-weight:750; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.arc-similar-copy small,.arc-similar-copy>span { display:block; overflow:hidden; color:#667085; font-size:12px; line-height:1.55; text-overflow:ellipsis; white-space:nowrap; }
.arc-similar-copy small { margin-top:3px; }
.arc-similar-copy>span { margin-top:1px; color:#7b8491; }

/* Phase 4: similar materials (administrator detail only) */
.arc-admin-ai-recommendation-list { display:grid; gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid #edf0f3; }
.arc-admin-ai-recommendation-list>div { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr) auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid #e5e9ef; border-radius:5px; background:#fbfcfd; }
.arc-admin-ai-recommendation-list strong { overflow:hidden; color:#102746; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.arc-admin-ai-recommendation-list span { overflow:hidden; color:#344054; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.arc-admin-ai-recommendation-list em { color:#667085; font-size:11px; font-style:normal; white-space:nowrap; }
@media (max-width:1023px) { .arc-similar-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:767px) { .arc-similar-materials { margin-top:30px; padding-top:24px; } .arc-similar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .arc-similar-head h2 { font-size:19px !important; } .arc-similar-head p { font-size:12px; } .arc-admin-ai-recommendation-list>div { grid-template-columns:1fr; gap:3px; } .arc-admin-ai-recommendation-list em { white-space:normal; } }
/* Existing attachment AI reanalysis (administrator edit screen) */
.arc-existing-ai-action { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 12px; margin-top:12px; padding-top:12px; border-top:1px solid #e3e8ef; }
.arc-ai-existing-start { min-height:38px; border:1px solid #173e7a; background:#173e7a; color:#fff; font-size:13px; font-weight:800; }
.arc-ai-existing-start:hover:not(:disabled) { background:#102f61; }
.arc-ai-existing-start:disabled { cursor:wait; opacity:.65; }
.arc-existing-ai-action small { color:#667085; font-size:12px; line-height:1.5; }
@media (max-width:767px) { .arc-existing-ai-action { align-items:flex-start; justify-content:flex-start; } .arc-existing-ai-action small { width:100%; } }
/* 관리자 수정화면: 기존 첨부파일 AI 재분석 버튼 */
.arc-ai-existing-start { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 18px; border:1px solid #102f61; border-radius:6px; background:#102f61; color:#fff; font-size:14px; font-weight:800; letter-spacing:-.02em; box-shadow:0 2px 5px rgba(16,47,97,.16); }
.arc-ai-existing-start-icon { color:#b8d8ff; font-size:16px; line-height:1; }
.arc-ai-existing-start:hover:not(:disabled), .arc-ai-existing-start:focus-visible:not(:disabled) { background:#0a2145; border-color:#0a2145; color:#fff; }
.arc-ai-existing-start:disabled { background:#8fa4c5; border-color:#8fa4c5; color:#eff5ff; opacity:1; }

/* 관리자 수정화면: 기존 첨부파일 AI 재분석 레이어 */
.arc-ai-layer { position:fixed; z-index:10050; inset:0; display:none; align-items:center; justify-content:center; padding:20px; }
.arc-ai-layer.is-open { display:flex; }
.arc-ai-layer__dim { position:absolute; inset:0; background:rgba(10,20,38,.56); backdrop-filter:blur(2px); }
.arc-ai-layer__dialog { position:relative; width:min(100%, 470px); padding:36px 32px 30px; border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.24); text-align:center; }
.arc-ai-layer__close { position:absolute; top:14px; right:16px; width:34px; height:34px; border:0; border-radius:50%; background:#f2f5f9; color:#27364e; font-size:26px; font-weight:300; line-height:30px; }
.arc-ai-layer.is-busy .arc-ai-layer__close { display:none; }
.arc-ai-layer__icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin:0 auto 16px; border-radius:50%; background:#eaf2ff; color:#1554ad; font-size:22px; }
.arc-ai-layer.is-result .arc-ai-layer__icon { background:#e8f7ef; color:#18794e; }
.arc-ai-layer.is-error .arc-ai-layer__icon { background:#fff0ef; color:#c53d33; }
.arc-ai-layer__title { margin:0; color:#12213c; font-size:22px; font-weight:800; letter-spacing:-.045em; }
.arc-ai-layer__message { margin:13px 0 0; color:#617087; font-size:14px; line-height:1.7; word-break:keep-all; }
.arc-ai-layer__message strong { color:#12213c; }
.arc-ai-layer__progress { height:8px; margin:25px 0 10px; overflow:hidden; border-radius:99px; background:#e8edf4; }
.arc-ai-layer__progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg, #1754aa, #3f80da); transition:width .35s ease; }
.arc-ai-layer__percent { min-height:20px; margin:0; color:#1754aa; font-size:13px; font-weight:800; }
.arc-ai-layer__actions { display:flex; gap:8px; margin-top:25px; }
.arc-ai-layer__button { flex:1; min-height:48px; border:1px solid #d6deea; border-radius:7px; background:#fff; color:#31415b; font-size:14px; font-weight:800; }
.arc-ai-layer__button.is-primary { border-color:#13233f; background:#13233f; color:#fff; }
.arc-ai-layer__button:hover, .arc-ai-layer__button:focus-visible { filter:brightness(.96); }
@media (max-width:480px) { .arc-ai-layer { padding:14px; } .arc-ai-layer__dialog { padding:32px 22px 24px; border-radius:14px; } .arc-ai-layer__title { font-size:19px; } }
/* 관리자 수정화면: 기존 첨부파일 AI 분석 단축 버튼 */
.arc-ai-existing-start { min-width:74px; min-height:39px; padding:0 12px; border:0; border-radius:2px; background:#202124; color:#fff; font-size:13px; font-weight:800; box-shadow:none; }
.arc-ai-existing-start:hover:not(:disabled), .arc-ai-existing-start:focus-visible:not(:disabled) { background:#050505; border:0; color:#fff; }
/* 관리자 수정화면: 파일 선택 버튼과 동일한 대비의 AI 분석 버튼 */
.arc-btn.arc-btn-dark.arc-ai-existing-start { min-width:74px; height:39px; min-height:39px; padding:0 12px; border:0 !important; border-radius:4px; background:#111827 !important; color:#fff !important; font-size:13px; font-weight:800; line-height:1; box-shadow:none; }
.arc-btn.arc-btn-dark.arc-ai-existing-start:hover:not(:disabled), .arc-btn.arc-btn-dark.arc-ai-existing-start:focus-visible:not(:disabled) { border:0 !important; background:#050b18 !important; color:#fff !important; }
.arc-btn.arc-btn-dark.arc-ai-existing-start:disabled { background:#6f7b8d !important; color:#fff !important; }

/* 상세페이지: 비슷한 자료 — 데스크톱 6열, 최대 12개(2줄), 16:9 미리보기 */
.arc-similar-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.arc-similar-thumb { aspect-ratio:16 / 9; }
@media (max-width:1279px) { .arc-similar-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1023px) { .arc-similar-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:767px) { .arc-similar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } }
/* 상세페이지: 비슷한 자료는 미디어·정보 2열 아래에서 전체 본문 폭을 사용 */
.arc-view-page > .arc-similar-materials { width:100%; }

/* ==== 장바구니 (6단계) ==== */
.arc-card { position:relative; }
.arc-card-cart { position:absolute; top:8px; right:8px; z-index:5; width:34px; height:34px; border:0; border-radius:8px; background:rgba(17,24,39,.72); color:#fff; font-size:16px; cursor:pointer; opacity:0; transition:opacity .15s; }
.arc-card:hover .arc-card-cart, .arc-card-cart:focus-visible { opacity:1; }
@media (hover:none) { .arc-card-cart { opacity:1; background:rgba(17,24,39,.55); } }

/* ==== 폰: 손가락으로 누르는 것들 ====
   장바구니 버튼과 페이지 번호는 이 파일 뒤쪽에서 정의되므로(뒤에 오는
   규칙이 이긴다) 위쪽 460px 블록이 아니라 여기서 손봐야 실제로 먹는다. */
@media (max-width:640px) {
    /* 썸네일 위에 얹히는 버튼이라 44px 로 키우면 사진을 가린다 */
    .arc-card-cart { width:38px; height:38px; font-size:17px; }
    .arc-board .arc-paging .pg_wrap { flex-wrap:wrap; gap:5px !important; }
    .arc-board .arc-paging .pg_page,
    .arc-board .arc-paging .pg_current,
    .arc-board .arc-paging .pg_start,
    .arc-board .arc-paging .pg_end,
    .arc-board .arc-paging .pg_prev,
    .arc-board .arc-paging .pg_next { min-width:44px !important; height:44px !important; padding:0 8px !important; }
    .arc-list-detail-link { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }

    /* 목록 상단 도구줄. 검색창이 flex:1 1 0% 이라 나머지(범위·상세검색·모두담기)가
       한 줄을 다 먹고 나면 남는 21px 만 차지하고 있었다. 검색창에 한 줄을
       통째로 주고 버튼들은 아랫줄로 내린다. */
    .arc-list-tools { flex-wrap:wrap; gap:10px; }
    .arc-searchbox { flex:1 1 100%; width:100%; order:1; height:48px; }
    .arc-list-detail-link { order:3; }
    .arc-list-tools .arc-btn { order:4; }

    /* 상세페이지: 관련 자료 좌우 이동 버튼 — 손가락으로 눌러야 하므로 키운다.
       위쪽 .arc-related-body .arc-related-arrows button(32px)보다 선택자를
       같은 수준으로 맞춰야 뒤에 오는 이 규칙이 이긴다. */
    .arc-related-body .arc-related-arrows button { width:44px; height:44px; font-size:18px; }
}