/* =====================================================================
   SUB/img_one — 이미지 1장 + 감싸는 박스 + 맵 링크
   .im_wrap 클래스 : im_al_{left|center|right} im_bw_{fit|full} im_has_bg im_has_mo
   .im_wrap 변수   : --im-pt --im-pb --im-pl --im-pr (바깥 여백) --im-bg --im-r --im-bp (박스) — 설정창 → wid_css 주석
   ===================================================================== */
.img_one{width:100%; float:left; position:relative;}
.img_one.im_inner_off > .contents-container{width:100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important;}

.img_one .im_wrap{
  width:100%; float:left; box-sizing:border-box;
  padding:var(--im-pt, 0) var(--im-pr, 0) var(--im-pb, 0) var(--im-pl, 0);
  text-align:center;
}
.img_one .im_al_left{text-align:left;}
.img_one .im_al_right{text-align:right;}

/* 제목 구간 (이미지 위 제목 + 설명) — @im_tt on/off · @im_ta 정렬 · --im-ts 제목 · --im-ds 설명 · --im-td 제목↔설명 · --im-tg 제목 구간↔이미지 */
.img_one .im_head{--im-f:1; margin:0 0 var(--im-tg, 20px); text-align:left; line-height:normal;}
.img_one .im_ta_center .im_head{text-align:center;}
.img_one .im_ta_right .im_head{text-align:right;}
.img_one .im_tt_off .im_head{display:none;}
.img_one .im_head .im_tit{font-size:calc(var(--im-ts, 32px) * var(--im-f)); font-weight:700; line-height:1.3; color:#111; letter-spacing:-0.02em; word-break:keep-all;}
.img_one .im_head .im_desc{font-size:calc(var(--im-ds, 17px) * var(--im-f2, 1)); margin-top:var(--im-td, 10px); line-height:1.7; color:#333; white-space:pre-line; word-break:keep-all;}
.img_one .im_head .im_tit:empty, .img_one .im_head .im_desc:empty{display:none;}
/* 설명 줄마다 (.im_li) · 줄 앞 표시 = .im_wrap.im_tb_{none|dot|dash|sq|circle|check|num} */
.img_one .im_head .im_desc{counter-reset:imli;}
.img_one .im_head .im_li{display:block; position:relative;}
.img_one .im_head .im_li + .im_li{margin-top:.25em;}
.img_one .im_wrap:not(.im_tb_none) .im_head .im_li{padding-left:1.1em; text-align:left;}
.img_one .im_wrap:not(.im_tb_none) .im_head .im_li::before{position:absolute; left:0; color:var(--primary, #4d8f4f); font-weight:700;}
.img_one .im_tb_dot .im_head .im_li::before{content:'·'; font-size:1.3em; line-height:1.3;}
.img_one .im_tb_dash .im_head .im_li::before{content:'-'; }
.img_one .im_tb_sq .im_head .im_li::before{content:''; width:.38em; height:.38em; top:.66em; background:var(--primary, #4d8f4f);}
.img_one .im_tb_circle .im_head .im_li::before{content:''; width:.42em; height:.42em; top:.64em; border-radius:50%; background:var(--primary, #4d8f4f);}
.img_one .im_tb_check .im_head .im_li::before{content:'✓'; font-size:.95em;}
.img_one .im_tb_num .im_head .im_li{padding-left:1.6em;}
.img_one .im_tb_num .im_head .im_li::before{counter-increment:imli; content:counter(imli) '.';}
.img_one .im_head .im_ph{color:#a1a1aa; font-weight:400; outline:1px dashed #d4d4d8; outline-offset:2px;}
@media screen and (max-width:640px){
  .img_one .im_head{--im-f:.72; --im-f2:.9; margin-bottom:calc(var(--im-tg, 20px) * .6);}
  .img_one .im_head .im_desc{margin-top:calc(var(--im-td, 10px) * .7);}
}

/* 감싸는 박스 : fit = 이미지만큼 / full = 줄 가득(이미지는 정렬대로) */
.img_one .im_box{
  display:inline-block; vertical-align:top; max-width:100%; box-sizing:border-box;
  padding:var(--im-bp, 0); background:var(--im-bg, transparent); border-radius:var(--im-r, 0);
  text-align:inherit;
}
.img_one .im_bw_full .im_box{display:block; width:100%;}
/* 이미지 모서리 : 박스 배경이 있으면 (라운드 - 안쪽 여백), 없으면 라운드 그대로 */
.img_one .im_box > .im_frame{border-radius:max(0px, calc(var(--im-r, 0px) - var(--im-bp, 0px))); overflow:hidden;}
.img_one .im_wrap:not(.im_has_bg) .im_box > .im_frame{border-radius:var(--im-r, 0px);}

/* 이미지 틀 = 이미지 크기 그대로 (맵 영역 %가 이 틀 기준) */
.img_one .im_frame{position:relative; display:inline-block; vertical-align:top; max-width:100%; line-height:0;}
.img_one .im_frame .wg_img1{line-height:normal;}
.img_one .im_frame .wg_img1 img{display:block; max-width:100%; height:auto;}
/* 이미지 폭 : full = 박스 가득(기본, inner 안 100%) / auto = 원본 크기(정렬 적용) */
.img_one .im_iw_full .im_frame{display:block; width:100%;}
.img_one .im_iw_full .im_frame .wg_img1,
.img_one .im_iw_full .im_frame .wg_img1 img{width:100%;}
.img_one .im_iw_full .im_empty{width:100%;}
.img_one .im_empty{display:flex; align-items:center; justify-content:center; width:min(480px, 80vw); height:220px; line-height:1.4;
  border:2px dashed #c4b5fd; border-radius:10px; background:#faf5ff; color:#7c3aed; font-size:14px; cursor:pointer;}

/* 맵 영역 */
.img_one .im_map{position:absolute; inset:0; pointer-events:none;}
.img_one .im_area{position:absolute; display:block; pointer-events:auto; border-radius:4px; transition:background-color .2s, box-shadow .2s;}
.img_one .im_area_layer{cursor:pointer;}
.img_one a.im_area:hover,
.img_one .im_area_layer:hover,
.img_one .im_area[data-t].on,
.img_one a.im_area:focus-visible,
.img_one .im_area_layer:focus-visible{background:rgba(255,255,255,.18); box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px color-mix(in srgb, var(--primary, #2563eb) 70%, transparent); outline:none;}
.img_one .im_area_nolink{pointer-events:none; border:1px dashed rgba(124,58,237,.6);}
/* 편집 권한자 : 영역 위치를 옅게 보여 줌 */
.img_one.admin_div .im_area,
.img_one .im_wrap[data-map] .im_area{outline:1px dashed rgba(124,58,237,.45); outline-offset:-1px;}
body.wg-labels-off .img_one .im_area{outline:0;}
/* 마우스 올림 라인 없애기 (@im_hl:off) — 방문자 호버 효과 · 편집자 점선 모두 끔 (키보드 포커스 표시는 유지) */
.img_one .im_hl_off a.im_area:hover,
.img_one .im_hl_off .im_area_layer:hover,
.img_one .im_hl_off .im_area[data-t].on{background:none; box-shadow:none;}
.img_one .im_wrap.im_hl_off .im_area{outline:0;}

/* 모바일 이미지를 따로 넣은 경우 = 그림이 달라 맵이 어긋나므로 모바일에서 끔 (wg_mo_only 기준 767px) */
@media only all and (max-width:767px){
  .img_one .im_has_mo .im_map{display:none;}
}
@media screen and (max-width:640px){
  .img_one .im_wrap{padding:calc(var(--im-pt, 0px) * .5) calc(var(--im-pr, 0px) * .5) calc(var(--im-pb, 0px) * .5) calc(var(--im-pl, 0px) * .5);}
  .img_one .im_box{padding:calc(var(--im-bp, 0px) * .6);}
}

/* ---------- 관리자 : 이미지 설정 버튼 ---------- */
.img_one .im_set_btn{
  display:table; margin:0 0 10px auto; position:relative; z-index:40;
  padding:7px 14px; border:0; border-radius:6px; cursor:pointer;
  background:#7c3aed; color:#fff; font-size:13px; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.img_one.admin_div .grid_layout_badge{z-index:30;}

/* =====================================================================
   설정창 [이미지 설정] (img_one.js)
   ===================================================================== */
.imset{position:fixed; inset:0; z-index:2147483600; font-family:inherit; pointer-events:none;}
.imset_box{pointer-events:auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(980px, calc(100vw - 30px)); max-height:calc(100vh - 40px); display:flex; flex-direction:column; background:#fff; color:#222; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); border:1px solid #e5e7eb;}
.imset_head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:linear-gradient(135deg, #7c3aed, #6366f1); color:#fff; cursor:move; user-select:none; touch-action:none; border-radius:14px 14px 0 0;}
.imset_head b{font-size:15px;}
.imset_head button{border:0; background:rgba(255,255,255,.2); color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px;}
.imset_tabs{display:flex; gap:4px; padding:10px 18px 0; border-bottom:1px solid #e5e7eb; background:#fafafa;}
.imset_tabs button{padding:9px 14px; border:1px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; background:none; color:#6b7280; font-size:13px; font-weight:600; cursor:pointer; margin-bottom:-1px;}
.imset_tabs button.on{background:#fff; border-color:#e5e7eb; color:#7c3aed;}
.imset_body{padding:18px; overflow:auto; flex:1;}
.imset_lb{font-size:13px; font-weight:700; color:#374151; margin:6px 0 10px;}
.imset_lb small{font-weight:400; color:#9ca3af; margin-left:6px;}
.imset_sec{border-top:1px solid #f1f1f1; padding-top:12px; margin-top:4px;}
.imset_row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:14px; font-size:13px;}
.imset_row label{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
.imset_row input[type=range]{width:150px;}
.imset_row b.v{min-width:42px; color:#7c3aed; font-weight:700;}
.imset_row input[type=color]{width:34px; height:28px; padding:0; border:1px solid #d1d5db; border-radius:6px; background:#fff; cursor:pointer;}
.imset_seg{display:inline-flex; border:1px solid #d1d5db; border-radius:8px; overflow:hidden;}
.imset_seg button{padding:6px 12px; border:0; border-right:1px solid #e5e7eb; background:#fff; font-size:12px; cursor:pointer; color:#374151;}
.imset_seg button:last-child{border-right:0;}
.imset_seg button.on{background:#7c3aed; color:#fff;}
.imset_col{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid #e5e7eb; border-radius:8px; background:#fafafa;}
.imset_col button{font-size:11px; color:#6b7280; border:0; background:none; cursor:pointer; text-decoration:underline;}
.imset_inner{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; margin-bottom:16px; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:10px; font-size:13px;}
.imset_inner label{display:inline-flex; align-items:center; gap:6px; font-weight:700; cursor:pointer;}
.imset_inner span{color:#6b7280; font-size:12px;}
.imset_note{color:#9ca3af; font-size:12px;}
.imset_foot{display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid #eee;}
.imset_foot button{padding:9px 18px; border-radius:8px; border:1px solid #d1d5db; background:#fff; cursor:pointer; font-size:13px;}
.imset_foot .imset_save{background:#7c3aed; border-color:#7c3aed; color:#fff; font-weight:700;}
.imset_msg{font-size:12px; color:#6b7280; margin-right:auto; align-self:center;}

/* [맵 링크] 탭 : 왼쪽 이미지에 끌어서 영역 · 오른쪽 영역 목록 */
.imm{display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(260px, 1fr); gap:16px; align-items:start;}
.imm_left{background:#f3f4f6; border-radius:10px; padding:12px; text-align:center;}
.imm_tip{font-size:12px; color:#6b7280; margin-bottom:8px; text-align:left; display:flex; align-items:center; gap:8px;}
.imm_tip > span{flex:1; min-width:0;}
/* 도표 편집기 열기 */
.imset .imm_drawbtn{flex:none; padding:6px 12px; border-radius:6px; border:1px solid #0f766e; background:#fff; color:#0f766e; font-size:12px; font-weight:600; cursor:pointer;}
.imset .imm_drawbtn:hover{background:#0f766e; color:#fff;}
.imm_stage{position:relative; display:inline-block; max-width:100%; line-height:0; user-select:none; touch-action:none; cursor:crosshair; box-shadow:0 0 0 1px #d1d5db;}
.imm_stage img{display:block; max-width:100%; max-height:58vh; width:auto; height:auto; pointer-events:none; -webkit-user-drag:none;}
.imm_noimg{padding:60px 20px; color:#9ca3af; font-size:13px; line-height:1.5;}
.imm_r{position:absolute; box-sizing:border-box; border:2px solid #7c3aed; background:rgba(124,58,237,.18); cursor:move;}
.imm_r.on{border-color:#f97316; background:rgba(249,115,22,.2); z-index:2;}
.imm_r.nolink{border-style:dashed;}
.imm_r > i{position:absolute; left:-2px; top:-2px; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box; background:#7c3aed; color:#fff; font:700 11px/20px sans-serif; font-style:normal; border-radius:0 0 6px 0; text-align:center;}
.imm_r.on > i{background:#f97316;}
.imm_h{position:absolute; width:12px; height:12px; background:#fff; border:2px solid #f97316; border-radius:50%; box-sizing:border-box; display:none;}
.imm_r.on .imm_h{display:block;}
.imm_h[data-h=nw]{left:-7px; top:-7px; cursor:nwse-resize;}
.imm_h[data-h=ne]{right:-7px; top:-7px; cursor:nesw-resize;}
.imm_h[data-h=sw]{left:-7px; bottom:-7px; cursor:nesw-resize;}
.imm_h[data-h=se]{right:-7px; bottom:-7px; cursor:nwse-resize;}
.imm_draw{position:absolute; border:2px dashed #f97316; background:rgba(249,115,22,.12); pointer-events:none;}
.imm_list{display:flex; flex-direction:column; gap:8px; max-height:58vh; overflow:auto;}
.imm_empty{padding:20px; text-align:center; color:#9ca3af; font-size:13px; border:1px dashed #d1d5db; border-radius:10px; line-height:1.6;}
.imm_row{border:1px solid #e5e7eb; border-radius:10px; padding:10px; display:grid; grid-template-columns:26px 1fr; gap:6px 8px; font-size:12px; background:#fff; cursor:pointer;}
.imm_row.on{border-color:#f97316; background:#fff7ed;}
.imm_row > b{grid-row:span 3; width:22px; height:22px; border-radius:6px; background:#7c3aed; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center;}
.imm_row.on > b{background:#f97316;}
.imm_row input[type=text]{width:100%; box-sizing:border-box; padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; font-size:12px;}
.imm_row .imm_ops{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.imm_row .imm_ops label{display:inline-flex; align-items:center; gap:4px; cursor:pointer;}
.imm_row .imm_del{border:0; background:none; color:#ef4444; cursor:pointer; font-size:12px;}
@media (max-width:760px){ .imm{grid-template-columns:1fr;} }

/* 레이어 제어 스위치 · 영역별 보일 섹션 */
.imm_hard{display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:14px; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:10px; font-size:13px;}
.imm_hard small{color:#6b7280; font-size:12px; font-weight:400;}
.imm_sw{position:relative; flex:0 0 auto; width:42px; height:24px; cursor:pointer;}
.imm_sw input{position:absolute; opacity:0; width:0; height:0;}
.imm_sw span{position:absolute; inset:0; background:#d1d5db; border-radius:12px; transition:background .2s;}
.imm_sw span::after{content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s;}
.imm_sw input:checked + span{background:#7c3aed;}
.imm_sw input:checked + span::after{transform:translateX(18px);}
.imm_sw input:focus-visible + span{outline:2px solid #a78bfa; outline-offset:2px;}
.imm_sec{grid-column:1 / -1; margin-top:4px; padding-top:8px; border-top:1px dashed #e5e7eb; display:flex; flex-direction:column; gap:7px; cursor:default;}
.imm_sec_lb{font-weight:700; color:#374151;}
.imm_sec_lb small{font-weight:400; color:#9ca3af; margin-left:4px;}
.imm_sec_bts{display:flex; flex-wrap:wrap; gap:6px;}
.imm_sec_bt{display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border:1px solid #d1d5db; border-radius:999px; background:#fff; color:#374151; font-size:12px; cursor:pointer;}
.imm_sec_bt i{font-size:14px; color:#6b7280;}
.imm_sec_bt.hid{border-style:dashed; color:#6b7280;}
.imm_sec_bt.on{background:#7c3aed; border-color:#7c3aed; color:#fff;}
.imm_sec_bt.on i{color:#fff;}
.imm_sec_none{color:#9ca3af; font-size:12px;}
.imm_sec_none button{border:0; background:none; color:#ef4444; cursor:pointer; font-size:12px; text-decoration:underline;}
.imm_sec_m{display:flex; align-items:center; gap:8px;}
.imm_sec_note{color:#9ca3af; font-size:11px; line-height:1.5;}

/* 모바일 이미지 칸 (무대 아래) */
.imm_mo{display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; text-align:left; line-height:1.4;}
.imm_mo_th{flex:0 0 64px; width:64px; height:96px; border-radius:8px; background:#f3f4f6; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:12px;}
.imm_mo_th img{width:100%; height:100%; object-fit:cover;}
.imm_mo_tx{font-size:12px; color:#374151; display:flex; flex-direction:column; gap:4px;}
.imm_mo_tx small{color:#9ca3af;}
.imm_mo_st{color:#6b7280;}
.imm_mo_bt{display:flex; gap:6px; margin-top:2px;}
.imm_mo_bt button{padding:6px 12px; border-radius:6px; border:1px solid #d1d5db; background:#fff; font-size:12px; cursor:pointer;}
.imm_mo_bt .imm_mo_pick{background:#7c3aed; border-color:#7c3aed; color:#fff; font-weight:600;}
.imm_mo_bt .imm_mo_pick:disabled{opacity:.5; cursor:default;}
.imm_mo_bt .imm_mo_del{color:#ef4444;}
.imm_sec_bt em{font-style:normal; font-size:10px; font-weight:700; color:#fff; background:#dc2626; border-radius:4px; padding:1px 5px;}   /* admin 전용 섹션 표시 */