/* JINDECK rebuild — additions for projects list/view and boards */

/* --- Projects --- */
.proj_top{margin:0 0 20px;padding:0 0 12px;border-bottom:1px solid #ddd;color:#444;font-size:13px}
.proj_top .crumb a{color:#666;margin-right:6px}
.proj_top .crumb a.on{color:#2557d4;font-weight:bold}

.proj_search{display:flex;justify-content:flex-end;align-items:center;margin:14px 0 18px;gap:8px}
.proj_search input{border:1px solid #ccc;padding:6px 8px;font-size:13px;width:240px;font-family:inherit}
.proj_search button{border:1px solid #2557d4;background:#2557d4;color:#fff;padding:6px 14px;cursor:pointer;font-size:13px}
.proj_search a.reset{font-size:13px;color:#888;margin-right:10px}

.proj_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj_card{background:#fff;border:1px solid #e1e4e8;border-radius:4px;overflow:hidden;transition:.2s}
.proj_card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.proj_card .thumb{display:block;background:#f6f8fa;aspect-ratio:4/3;text-align:center;line-height:0;position:relative;overflow:hidden}
.proj_card .thumb img{width:100%;height:100%;object-fit:cover}
.proj_card .thumb .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:13px;line-height:1}
.proj_card .body{padding:14px}
.proj_card .title{margin:0 0 6px;font-size:15px;font-weight:600;line-height:1.4}
.proj_card .title a{color:#222;text-decoration:none}
.proj_card .title a:hover{color:#2557d4}
.proj_card .meta{margin:0;font-size:12px;color:#777}
.proj_card .meta span{margin-right:8px}
.proj_card .date{margin:8px 0 0;font-size:11px;color:#aaa}

.proj_empty{padding:80px 0;text-align:center;color:#888;background:#fafbfc;border:1px dashed #e1e4e8;border-radius:4px}

.proj_pager{margin:30px 0 50px;text-align:center}
.proj_pager a,.proj_pager span{display:inline-block;padding:6px 10px;margin:0 2px;border:1px solid #e1e4e8;border-radius:3px;font-size:13px;color:#444;text-decoration:none}
.proj_pager a:hover{background:#f0f3f6}
.proj_pager span.cur{background:#2557d4;color:#fff;border-color:#2557d4}
.proj_pager span.gap{border:0}

/* Project view */
.proj_view{margin:0 0 40px}
.proj_view .pv_head{padding:18px 0;border-bottom:2px solid #333}
.proj_view .pv_head h3{margin:0;font-size:22px;font-weight:700;color:#222}
.proj_view .pv_main{display:grid;grid-template-columns:520px 1fr;gap:30px;padding:24px 0}
.proj_view .pv_main .pv_img{background:#f6f8fa;text-align:center;border:1px solid #eaeef2}
.proj_view .pv_main .pv_img img{max-width:100%;cursor:zoom-in}
.proj_view .pv_main .pv_img .noimg{display:block;padding:120px 0;color:#bbb}
.proj_view .pv_main dl{margin:0;font-size:14px;line-height:1.8}
.proj_view .pv_main dl dt{display:inline-block;width:90px;color:#666;font-weight:600;vertical-align:top}
.proj_view .pv_main dl dd{display:inline-block;width:calc(100% - 100px);margin:0}
.proj_view .pv_main dl .row{padding:6px 0;border-bottom:1px dashed #eee}

.proj_view .pv_thumbs{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.proj_view .pv_thumbs img{width:72px;height:54px;object-fit:cover;border:1px solid #ddd;cursor:pointer}
.proj_view .pv_thumbs img:hover{border-color:#2557d4}

.proj_view .pv_desc{padding:24px 0;border-top:1px solid #ddd;font-size:14px;line-height:1.8;color:#333}
.proj_view .pv_desc img{max-width:100%;height:auto}

.proj_view .pv_nav{margin-top:24px;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.proj_view .pv_nav a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #f0f0f0;color:#444;text-decoration:none;font-size:13px}
.proj_view .pv_nav a:last-child{border-bottom:0}
.proj_view .pv_nav a:hover{background:#fafbfc}
.proj_view .pv_nav a span{color:#999;font-size:12px;width:60px}

.proj_view .pv_actions{margin-top:24px;text-align:center}
.proj_view .pv_actions a{display:inline-block;padding:10px 24px;border:1px solid #333;color:#333;text-decoration:none;font-size:13px}
.proj_view .pv_actions a:hover{background:#333;color:#fff}

/* --- Board --- */
.board_search{display:flex;justify-content:flex-end;align-items:center;margin:14px 0 18px;gap:8px}
.board_search input{border:1px solid #ccc;padding:6px 8px;font-size:13px;width:240px}
.board_search button{border:1px solid #2557d4;background:#2557d4;color:#fff;padding:6px 14px;cursor:pointer;font-size:13px}

table.board_list{width:100%;border-collapse:collapse;border-top:2px solid #333;font-size:14px}
table.board_list th{padding:12px 8px;text-align:center;border-bottom:1px solid #ddd;background:#fafbfc;color:#444;font-weight:600;font-size:13px}
table.board_list td{padding:12px 8px;text-align:center;border-bottom:1px solid #eee;color:#555}
table.board_list td.title{text-align:left}
table.board_list td.title a{color:#222;text-decoration:none}
table.board_list td.title a:hover{color:#2557d4}
table.board_list td.title .ico_file{margin-left:6px;color:#2557d4;font-size:12px}
table.board_list .notice td{background:#fff8e0}
table.board_list .notice .num{color:#d4521b;font-weight:bold;font-size:12px}
.board_empty{padding:60px 0;text-align:center;color:#888;border-bottom:1px solid #ddd}

.board_view{border-top:2px solid #333;margin-top:18px}
.board_view .bv_head{padding:18px 14px;border-bottom:1px solid #ddd;background:#fafbfc}
.board_view .bv_head h3{margin:0 0 6px;font-size:18px;color:#222}
.board_view .bv_head .bv_meta{font-size:12px;color:#888}
.board_view .bv_head .bv_meta span{margin-right:14px}
.board_view .bv_files{padding:12px 14px;border-bottom:1px solid #eee;background:#fff;font-size:13px}
.board_view .bv_files strong{color:#444;margin-right:8px}
.board_view .bv_files a{margin-right:14px;color:#2557d4;text-decoration:none}
.board_view .bv_files a:hover{text-decoration:underline}
.board_view .bv_content{padding:24px 14px;min-height:200px;line-height:1.8;color:#333;font-size:14px;border-bottom:1px solid #ddd}
.board_view .bv_content img{max-width:100%;height:auto}

.board_actions{margin-top:18px;text-align:center}
.board_actions a{display:inline-block;padding:9px 22px;border:1px solid #333;color:#333;text-decoration:none;font-size:13px;margin:0 4px}
.board_actions a:hover{background:#333;color:#fff}

/* --- Index main widget tweaks --- */
.m_data .inner ul li p a:hover{color:#2557d4}

/* ==========================================================================
 * Migration layout fix  (updated 2026-05-24 — round 2)
 *
 * The header.php was previously wrapping both .gnb and .lnb inside a single
 * .header_inner div. The original ASP keeps .lnb as a SIBLING of
 * .header_inner. We have now matched the original HTML structure exactly,
 * so all the previous `.header_inner .lnb { background:#fff }` overrides
 * are deleted — they no longer apply (and would hide the dark navy GNB
 * band if reintroduced incorrectly).
 *
 * Remaining fixes here are minimal:
 *   1. Add a clearfix to .gnb so the floated <ul> doesn't collapse the
 *      navy band into 0px height in modern browsers (the original CSS
 *      missed this — the original site likely depended on IE hasLayout).
 *   2. Cosmetic tweaks for the help-desk widget and the sitemap dl
 *      width, which depend on values not provided by the original CSS.
 * ==========================================================================
 */

/* migration layout fix - .gnb clearfix (dark navy band height guarantee) --
 * In layout.css:
 *   .gnb       { width:998px; text-align:right; }
 *   .gnb ul    { float:right; }
 *   .gnb li a  { padding:11px 15px; }
 * Without a clearfix on .gnb, the floated <ul> doesn't contribute to .gnb
 * height -> .header_inner shrinks to 0 and the #06294e background never
 * paints. These two rules force the band to be visible at its natural
 * ~34px (11+12+11) height.
 */
.gnb           { overflow:hidden; }       /* establishes a new BFC, contains the float */
.gnb:after     { content:''; display:block; clear:both; }   /* extra defensive clearfix */

/* migration layout fix - main page helpDesk widget ----------------------
 * Container math (original layout.css):
 *   .m_container_inner = 997px (with 1px border-left/right -> 995px usable)
 *   .m_notice  = 374px (1px border-right)
 *   .m_data    = 373px (1px border-right)
 *   .helpDesk  = float:left, no width given -> takes natural image width
 * Image /images/main/img_m_info.gif is 247x182 -> 247px column.
 *   374 + 373 + 247 = 994 < 995 ✓ -- fits the row.
 * Previous tweak set `.helpDesk { width:250px; padding-left:6px }` which
 * pushed the third column to 256px and forced it to wrap. Reverted to the
 * original (float:left only) so the row stays one line.
 */
.helpDesk      { /* float:left already declared in layout.css */ }
.helpDesk img  { display:block; }

/* migration layout fix - sitemap dl width -------------------------------
 * Original .siteMap dl uses width:182px x 4 columns + 19px gap = 804px.
 * Our #content width is 787px - 30px padding-left = 757px, so the 4th
 * column wraps. Shrink dl width slightly so all four columns fit.
 */
.siteMap dl       { margin-left:14px; }
.siteMap dl dt    { width:170px; }
.siteMap dl.first { margin-left:0; }

/* migration layout fix - sub page breadcrumb tweaks ---------------------
 * .title_sub h4 and .path are position:absolute in the original; anchor
 * them to left:0 so they don't drift if a parent gets transformed.
 */
.title_sub                          { position:relative; }
.title_sub h4                       { left:0; }
.title_sub .path                    { left:0; }
.title_sub .path ul li:first-child  { padding-left:24px; }   /* room for the home icon */

/* migration layout fix - footer ----------------------------------------- *
 * Original layout.css has no #footer margin-top — footer sits flush below
 * the content area (it carries its own 33px internal padding for breathing
 * room). The earlier blanket `#footer { margin-top:30px }` we added showed
 * up as a visible gap on the main page, between the 3-column m_container
 * widgets and the footer band.
 *
 * Keep the 30px breathing room for SUB pages (which use #container as the
 * content wrapper). Main page (#m_container) gets no extra margin — the
 * widget row's bottom border (m_notice / m_data right-borders + helpDesk
 * image) connects naturally to the footer's top border-top:1px line.
 */
#container ~ #footer   { margin-top:30px; }
#m_container ~ #footer { margin-top:0; }

/* migration layout fix - main 3-column widget bottom alignment ------------
 * helpDesk image is 247x182. m_notice / m_data total at ~185px in the
 * filled state, but in the empty state (no posts, the inner just shows
 * "등록된 글이 없습니다.") the column can render slightly shorter than
 * the helpDesk image — leaving a small step at the bottom of the row and
 * making the right-border lines look uneven. Force a min-height that
 * matches the helpDesk image so all three columns end on the same line.
 * Scoped to #m_container so sub pages are untouched.
 */
#m_container .m_notice,
#m_container .m_data    { min-height:182px; box-sizing:border-box; }

/* =====================================================================
 * 공사실적 (projects) — list/view in original OKTOMATO goods skin layout
 * (added 2026-05-26 round 2 — replaces former .proj_* card grid)
 * =====================================================================
 */

/* CRITICAL: every block below must stay INSIDE the parent .article box
 * (which is inside #content { width:787px; padding-left:30px } in layout.css).
 * Do NOT use negative margins, oversized fixed widths, or 100vw — those
 * make the projects page render wider than other sub-pages.
 */

/* projects-only wrapper.
 * Fills the parent .article box (which sits inside #content { width:787 +
 * padding-left:30 }). No max-width cap — the original `<table width="787">`
 * was a rough "100% of the content area" expression for that era's table
 * markup. Constraining further (787 or even less) only makes the layout
 * look narrower than the rest of the site, which is what the user kept
 * reporting. */
.gv_wrap               { width:100%; box-sizing:border-box; margin:0; }

/* category box at the top of list/view ---------------------------------- */
.gv_catbox             { width:100%; box-sizing:border-box;
                         border:1px solid #dcdcdc; background:#fff; margin:0 0 14px; }
.gv_catbox_top         { padding:10px 14px; border-bottom:1px dashed #dcdcdc; font-size:13px; color:#555; }
.gv_catbox_top strong  { color:#333; font-weight:bold; margin-right:6px; }
.gv_catbox_top .gv_arrow { vertical-align:middle; margin:0 6px; }
.gv_catbox_top a       { color:#555; text-decoration:none; }
.gv_catbox_top a.on    { color:#2557d4; font-weight:bold; }
.gv_catbox_top a:hover { color:#2557d4; }
.gv_catbox_children    { padding:10px 14px; font-size:13px; color:#555; }
.gv_catbox_children a       { color:#717171; text-decoration:none; padding:0 10px; line-height:18px; }
.gv_catbox_children a:hover { color:#000; font-weight:bold; }
.gv_catbox_children a.on    { color:#2557d4; font-weight:bold; }
.gv_catbox_children .gv_sep { vertical-align:middle; }
/* view-only: tighter (no children row) */
.gv_catbox_view .gv_catbox_top { border-bottom:0; }

/* SEARCH box ----------------------------------------------------------- */
.gv_search             { display:flex; align-items:center; justify-content:center; gap:6px;
                         width:100%; box-sizing:border-box;
                         padding:12px; background:#f9f9f9; border:1px solid #e3e3e3; margin:14px 0 8px; }
.gv_search img.gv_search_label { margin-right:8px; vertical-align:middle; }
.gv_search input       { flex:1; max-width:480px; height:29px; padding:0 8px;
                         border:1px solid #d0d0d0; background:#fff; font-size:13px; color:#555; box-sizing:border-box; }
.gv_search .gv_search_btn { border:0; background:none; padding:0; cursor:pointer; line-height:0; }
.gv_search .gv_search_btn img { vertical-align:middle; }

/* top bar (page-size select + reset) ----------------------------------- */
.gv_topbar             { display:flex; justify-content:flex-end; align-items:center; gap:10px;
                         padding:8px 0; font-size:13px; }
.gv_topbar select      { border:1px solid #d0d0d0; height:28px; padding:0 6px; font-size:13px; }
.gv_topbar .gv_reset   { color:#888; text-decoration:underline; }

/* 5-column thumbnail grid — original uses 5 cells of td width="190" with
 * cellspacing=0 inside an outer table that fills the content area. We
 * mirror that: no horizontal gap, modest vertical gap, each cell padded
 * 2-3px so the borders don't touch.  The result is visually close to the
 * original "5-up" row at 190px-ish per cell. */
.gv_grid               { list-style:none; margin:0; padding:0;
                         display:grid; grid-template-columns:repeat(5, 1fr); gap:20px 0; }
.gv_card               { padding:0 3px; background:#fff; min-width:0; }
.gv_thumb              { display:flex; align-items:center; justify-content:center;
                         position:relative; background:#fff;
                         border:1px solid #e3e3e3; aspect-ratio:188/165;   /* original cell ratio */
                         text-align:center; line-height:0; overflow:hidden; }
/* IMPORTANT: never up-scale the source image. Some legacy uploads are tiny
 * "No image" placeholders (40x40); width/height:100% would stretch them. */
.gv_thumb img          { max-width:100%; max-height:100%;
                         width:auto; height:auto; display:block; }
.gv_thumb .gv_noimg,
.gv_thumb.noimg::before {
    content:"No image"; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:#c4c4c4; font-size:14px; font-style:italic; letter-spacing:.5px;
    background:repeating-linear-gradient(45deg,#fafafa 0 8px,#f3f3f3 8px 16px);
}
.gv_btn_view           { display:block; margin:8px 0 6px; text-align:center; line-height:0; }
.gv_btn_view img       { max-width:100%; height:auto; }
.gv_title              { margin:0; padding:4px 4px 6px; text-align:center;
                         font-size:13px; line-height:1.4; word-break:keep-all; }
.gv_title a            { color:#333; text-decoration:none; }
.gv_title a:hover      { color:#2557d4; }

/* responsive fallback for narrow viewports */
@media (max-width: 900px) { .gv_grid { grid-template-columns:repeat(3, 1fr); } .gv_wrap { width:100%; } }
@media (max-width: 600px) { .gv_grid { grid-template-columns:repeat(2, 1fr); } }

/* OKTOMATO-style pager (original /oktomato_g4/default/bbs/default/) ------ */
.gv_pager              { text-align:center; padding:20px 0 50px; font-size:13px; color:#666; }
.gv_pager a, .gv_pager b, .gv_pager img { vertical-align:middle; }
.gv_pager .bbs_page    { color:#e36b1f; font-weight:bold; padding:0 6px; }   /* current page = orange */
.gv_pager a.bbs        { color:#666; text-decoration:none; padding:0 6px; }
.gv_pager a.bbs:hover  { color:#000; text-decoration:underline; }
.gv_pager img.gv_pager_line { margin:0; }
.gv_pager img.disabled { opacity:.35; cursor:not-allowed; }
.gv_pager img          { margin:0 1px; }

/* ─── detail view ─────────────────────────────────────────────────── */
.gv_view               { display:grid; grid-template-columns:316px 1fr; gap:16px; margin:12px 0 20px; }
.gv_view_left          { width:316px; }
.gv_main_img           { width:306px; height:306px; padding:2px; background:#fff;
                         border:1px solid #e0e0e0; text-align:center;
                         display:flex; align-items:center; justify-content:center; }
.gv_main_img img       { max-width:300px; max-height:300px; }
.gv_main_img.noimg     { background:repeating-linear-gradient(45deg,#fafafa 0 10px,#f3f3f3 10px 20px); color:#bbb; font-style:italic; }
.gv_btn_zoom           { display:inline-block; margin:8px 0 10px; line-height:0; }
.gv_btn_zoom img       { vertical-align:middle; }
/* Thumbnail strip below the main image. Mimics the original which uses
 * small ~70x60 cells in a fixed-height row, with NO blue selection
 * outline (the bright border was a CSS artifact). Tiny placeholders
 * stay at their natural size, centered inside the cell. */
.gv_thumbs             { display:flex; gap:4px; margin-top:8px; flex-wrap:nowrap;
                         height:64px; align-items:center; overflow:hidden; }
.gv_thumbs img         { width:auto; height:auto; max-width:70px; max-height:54px;
                         border:1px solid #cfcfcf; cursor:pointer; background:#fff;
                         padding:2px; display:block; }
.gv_thumbs img.on      { border-color:#888; }
.gv_thumbs img:hover   { border-color:#666; }

.gv_view_right         { padding-left:8px; min-width:0; }
.gv_view_title         { margin:0 0 8px; padding:8px 0; font-size:20px; font-weight:bold;
                         color:#222; border-bottom:1px solid #ddd; }
.gv_info               { width:100%; border-collapse:collapse; margin-top:6px; font-size:14px; }
.gv_info th, .gv_info td { padding:9px 6px; border-bottom:1px solid #efefef; vertical-align:middle; }
.gv_info th            { font-weight:normal; color:#555; text-align:left; }
.gv_info td            { color:#222; }
.gv_info img.gv_dot    { display:inline-block; vertical-align:middle; margin:0 8px 0 4px; }

.gv_attach             { margin-top:18px; }
.gv_attach a           { display:inline-block; padding:6px 12px; border:1px solid #d0d0d0;
                         color:#444; background:#fafafa; text-decoration:none; font-size:13px; }
.gv_attach a:hover     { background:#f0f0f0; }

/* "상세내용" detail section — top & bottom bars always visible (original
 * keeps the divider lines even when body is empty). */
.gv_desc_wrap          { margin:22px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
.gv_desc_head          { padding:11px 0; background:#f7f7f7; border-bottom:1px solid #e2e2e2;
                         font-size:14px; font-weight:bold; color:#444; text-align:center;
                         letter-spacing:1px; }
.gv_desc               { padding:18px 14px; min-height:80px; line-height:1.7; color:#333; font-size:14px; }
.gv_desc img           { max-width:100%; height:auto; }
.gv_desc_empty         { margin:0; min-height:50px; }

/* ─── action buttons ─────────────────────────────────────────────────
 * Moved INSIDE .gv_view_right (right column of the detail view) to match
 * the original which places these in the info-column's bottom row.
 * but_box_bg.gif is a 60px tall background image — let the row claim
 * 60px so the background paints correctly.
 */
.gv_navbar             { width:100%; height:60px; box-sizing:border-box;
                         display:flex; align-items:center; justify-content:center; gap:0;
                         margin-top:30px;
                         background:url(/images/goods/but_box_bg.gif) center top no-repeat; }
.gv_navbar a, .gv_navbar img { line-height:0; }
.gv_navbar a img       { display:inline-block; vertical-align:middle; }
.gv_navbar img.disabled { opacity:.35; cursor:not-allowed; }

.gv_bottom_actions     { text-align:center; padding:22px 0 30px; }
.gv_bottom_actions a   { display:inline-block; line-height:0; }
.gv_bottom_actions img { vertical-align:middle; }

/* responsive */
@media (max-width: 760px) {
    .gv_view { grid-template-columns:1fr; }
    .gv_view_left { width:100%; }
    .gv_main_img { width:100%; height:auto; aspect-ratio:1/1; }
    .gv_main_img img { max-width:100%; max-height:none; }
}