@charset "utf-8";

/** Notice Box **/
.board-notice	{ width: 264px; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box; }

/** Category Nav **/
#navi_category {position: relative; z-index: 0;}
#navi_category ul { text-align: center; margin: 10px 0; padding: 0; list-style: none; }
#navi_category li { display: inline-block; padding: 5px 0; }
#navi_category li:before { display: inline-block; content: "|"; padding: 0 15px; opacity: 0.5; }
#navi_category li:first-child:before { display: none; content: ""; }
#navi_category li a { text-decoration: none; }
#navi_category #bo_cate_on,
#navi_category li a:hover { font-weight: bold; }

.backColor		{ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.308); position: fixed; top: 0; left: 0; z-index: 0; }

#page_board_content	{ padding: 0 10px; }

.qna-box		{ overflow: hidden; }

.ui-option				{ clear: both; padding-bottom: 10px;  font-weight: 800; letter-spacing: 1px; }
.ui-write-box			{ margin: 10px auto; width: 100%; overflow: hidden; }
.ui-write-box textarea	{ width: 100%; min-height: 100px; padding: 10px; box-sizing: border-box; }
.ui-control			{ overflow: hidden; text-align: right; }

.ui-write-area.top		{ margin-bottom: 20px; }
.ui-write-area .txt-right	{ float:right }

.ui-qna-list				{ position: relative; clear: both; margin-top:15px;  padding:40px 120px !important;}
/* Global line removed in favor of segmented lines between posts */


.fa-file-alt {margin-left:5px;}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/woff/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}


.wr_sub { font-family: 'Pretendard'; font-size: 18px;}
.wr_cont { font-size:8pt; margin:0 10px; color:white; text-shadow: 0 0 3px #000;}


.ui-qna-list .left_align {margin-top:15px; width:100%; position: relative; left:auto; grid-column: 1; grid-row: 1; padding-right: 20px; box-sizing: border-box;}
.ui-qna-list .right_align {margin-top:15px; width:100%; position: relative; right:auto; grid-column: 3; grid-row: 1; padding-left: 20px; box-sizing: border-box;}
.ui-qna-list  strong {font-size: 9px; position: absolute;   top: -20px;}

@media all and (max-width: 800px) { 
	.ui-qna-list .left_align {width: 100%; padding-right: 0;}
	.ui-qna-list .right_align {width: 100%; padding-left: 0;}
	.ui-qna-list {padding:0px 5px !important;}
	.wr_cont {display: block; margin: 0;}
	.wr_sub {font-size: 16px; white-space: normal; word-break: keep-all; line-height: 1.2;}
	.tl-meta-col { white-space: normal; max-width: 100%; }
	.tl-flex-layout { gap: 8px; flex-direction: column; }
	.tl-flex-layout.align-right { align-items: flex-end; text-align: right; }
	.tl-flex-layout.align-left { align-items: flex-start; text-align: left; }
}

.ui-qna-list .circle,
.ui-qna-list .circle2,
.ui-qna-list .circle3 {
	position: relative;
	z-index: 5;
	margin: 0 auto;
	grid-column: 2;
	grid-row: 1;
}



.ui-qna-list .toggle_btn		{ padding:0 10px; border:none; background:none; outline:none }
.ui-qna-list .toggle_btn::after	{
	display: inline-block;
	margin-left: 6px;
	margin-bottom: 2px;
	padding: 2px;
	border: solid #666;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	content: "";
	opacity:0.3;
	transition: opacity .3s ease-in-out;
	-ms-transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
}
.ui-qna-list .toggle_btn:hover::after	{
	opacity:1;
}
.ui-qna-list .toggle_btn.open::after	{
	margin-bottom: 0;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
.ui-qna-list .toggle_btn+div	{ transition:none }
.ui-qna-list .box-shadow		{ margin-bottom:10px }
																			   
/* (Old individual line hiding rules are no longer needed since we use a continuous line) */

.ui-qna-list li p				{ clear: both; overflow: hidden; margin: 0 10px; }
.ui-qna-list li p i				{ position: relative; font-style: normal; margin-right: 5px; }
.ui-qna-list li p i.notice_ico	{ display:inline-block; overflow:hideen; width:1em; line-height:1; text-indent:-99px; vertical-align: text-bottom }
.ui-qna-list li p i.notice_ico::before	{ position: absolute; right:0; content: "\E91A"; font-family: "icon"; text-indent:0 }
.ui-qna-list li p em			{ font-style: normal; }
.ui-qna-list li p strong a,
.ui-qna-list li ul li em		{ display: inline-block; margin-left:10px; font-size:11px; }
.ui-qna-list li .qna-content,
.ui-qna-list li .qna-comment-content	{ padding: 0 10px; }
																				  
.ui-qna-list .date				{ float: right; font-size:10px; opacity:.7; }
.ui-qna-list .content			{ 
	margin:10px 0; 
	position: relative; 
	display: grid; 
	grid-template-columns: 1fr 40px 1fr; 
	grid-template-rows: auto; 
	 align-items: center;; 
	width: 100%; 
}
.ui-qna-list .secret-tag {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: red;
    font-size: 11px;
    font-weight: bold;
    z-index: 10;
}

.ui-qna-list li ul				{ clear:both; margin:0 10px; }
												  

@media all and (max-width: 460px) { 
	.ui-qna-list .ui-qna-list-password		{ position: relative; padding-right: 90px; }
	.ui-qna-list .ui-qna-list-password button	{ position: absolute; top: 0; right: 0; width: 90px; }
	.ui-qna-list .ui-qna-list-password input		{ width: 100%; }
}

.ui-qna-list li ul li					{ margin-bottom:10px; padding: 0; }
.ui-qna-list li ul li p					{ margin: 10px 0 0 0 }

.ui-qna-list .ui-qna-list-password label		{ padding-right: 10px; }
.ui-qna-list .ui-qna-list-password label.blur	{ text-shadow: none; }
.ui-qna-list .ui-qna-list-password input		{ position: relative; z-index: 1; }
.ui-qna-list .ui-qna-list-password button		{ 
	height: 30px; line-height: 30px; padding: 0 25px;
	margin-left: -5px; border-left-width: 0;

}

.ui-qna-list li div.ui-write-area					{ margin:10px 20px 0 }
.ui-qna-list li div.ui-write-area button			{ white-space:nowrap; height: 28px; line-height: 28px; padding: 0 25px; margin-top: 10px; }
.ui-qna-list li div.ui-write-area textarea			{
	width: 100%;
	height: 100px;
	padding: 10px;
	box-sizing: border-box;
	word-break: break-all;
}
.ui-qna-list .no-data			{ text-align: center; line-height: 100px; padding-bottom: 50px; }

.search-box			{ clear: both; float: right; margin-bottom: 10px; }


@media all and (max-width: 535px) {
	.ui-control button	{ display: block; clear: both; width: 100%; margin-top: 10px; }
}
@media all and (max-width: 435px) {
	.ui-control input[type="text"],
	.ui-control input[type="password"]	{ display: block; clear: both; width: 100%; margin-top: 10px; }
	.ui-qna-list	{ padding: 10px 0; }
}

/** bbs-style Write Page Layout - Concise Version **/
.board-write { 
    padding: 0; 
    max-width: 900px; 
    margin: 0 auto; 
    background: transparent;
}

/* Major Section Titles */
.group-header {
    margin: 25px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}
.group-header h4 {
    margin: 0;
    font-size: 18px;
    color: #d0d0d0;
    font-weight: 800;
    letter-spacing: -0.04em;
}

/* Row Layout (Label + Input) */
.board-write dl { 
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    margin-bottom: 8px;
    width: 100%;
}
.board-write dl dt { 
    width: 100px;
    flex-shrink: 0;
    line-height: 36px; 
    text-align: right; 
    padding-right: 15px;
    font-size: 13px;
    font-weight: 700;
    color: #929394;
}
.board-write dl dd { 
    flex: 1;
    margin-left: 0;
    line-height: normal;
}

/* Inputs & Textareas */
.board-write input[type="text"],
.board-write textarea {
    width: 100%;
    border: 1px solid #ddd !important;
    background: #fff !important;
    border-radius: 3px;
    padding: 8px 12px !important;
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
}
.board-write input[type="text"]:focus,
.board-write textarea:focus {
    border-color: #000 !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.03);
}
.board-write textarea {
    min-height: 100px;
    line-height: 1.5;
    resize: vertical;
}

/* Meta Grid (Options) */
.timeline-meta-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    background: #fafafa;
    padding: 12px 15px;
    border-radius: 4px;
    border: 1px solid #eee;
}
.timeline-meta-grid .meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.timeline-meta-grid .meta-item label {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    white-space: nowrap;
    min-width: 55px;
}


/* Color Picker Combo */
.color-picker-combo {
    display: flex;
    gap: 5px;
    align-items: center;
}
.color-picker-combo input[type="text"] {
    flex: 1;
}
.color-picker-combo input[type="color"] {
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
}

.board-write * {
    transition: none !important;
}

/* Disable transitions only inside this form to avoid animation stutter */
.board-write * {
    transition: none !important;
}
/* Content Images from Placeholders */
.ui-qna-list .wr_cont img.content-img {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    border-radius: 5px;
}

/* Segmented Vertical Lines */
.timeline-row { 
    position: relative; 
    margin-bottom: 60px; /* Increased gap from 10-15px to 60px */
}
.v-line {
    position: absolute;
    left: 50%;
    width: 2px;
    background: rgba(255,255,255,1);
    transform: translateX(-50%);
    z-index: 1;
}
.v-line.v-top {
    top: -60px; 
    height: 100px; 
}
.v-line.v-bottom {
    top: 40px; /* Center of the biggest point (circle3 is 50px, centers at 15+25=40px) */
    bottom: -60px; 
}
.timeline-row:first-child .v-line.v-top { display: none; }
.timeline-row:last-child .v-line.v-bottom { display: none; }

/* Timeline Two-Column Flex Layout */
.tl-flex-layout {
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: flex-start;
}
.tl-flex-layout.align-right {
    text-align: right;
}
.tl-flex-layout.align-left {
    text-align: left;
}

.tl-meta-col {
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    position: relative;
}

.tl-content-col {
    flex: 1;
    min-width: 0;
    word-break: break-all;
    line-height: 1.6;
}

/* Metadata components (MD buttons, Subject) */
.item-meta-buttons {
    font-size: 11px;
    font-weight: bold;
    color: #ffb300; /* Amber-ish MD label */
    position: absolute;
    top: -15px;
}
.tl-flex-layout.align-left .item-meta-buttons { left: 0; }
.tl-flex-layout.align-right .item-meta-buttons { right: 0; }
.item-meta-buttons a {
    color: inherit;
    text-decoration: none;
    margin-right: 5px;
    opacity: 0.8;
}
.wr_sub {
    font-size: 17px;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
}
.wr_cont {
    display: block;
}
.wr_cont img.content-img {
    display: block;
    margin: 10px 0;
    max-width: 250px;
}
.link_log {
    margin-top: 10px;
}


.file-link-pair {    align-items: center;}
.file-link-pair label {flex-shrink: 0;}
.del-small {
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Link Icon Tooltip (Speech Bubble) */
.link-tooltip-wrap {
    position: relative;
    display: inline-block;
    margin: 0 3px;
}
.link-tooltip-wrap .link-tooltip {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(30, 30, 40, 0.92);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
    z-index: 100;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}
/* 말풍선 꼬리 */
.link-tooltip-wrap .link-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(30, 30, 40, 0.92);
}
.link-tooltip-wrap:hover .link-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Adjust point height centering if needed - the lines are at 40px */

/* Custom Point Circle */
.ui-qna-list .circle.custom, 
.ui-qna-list .circle2.custom, 
.ui-qna-list .circle3.custom,
.ui-qna-list .circle-custom.custom {
    max-width: 50px;
    max-height: 50px;
    width: 40px; /* Default for custom if non-image, or just base size */
    height: 40px;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    grid-column: 2;
    grid-row: 1;
}
.ui-qna-list .circle.custom img,
.ui-qna-list .circle2.custom img,
.ui-qna-list .circle3.custom img,
.ui-qna-list .circle-custom.custom img {
    max-width: 10%;
    max-height: 10%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ui-qna-list .circle-custom {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    z-index: 5;
    margin: 0 auto;
    grid-column: 2;
    grid-row: 1;
}

/* Write Page Help Text */
.field-help {
    font-size: 11px;
    color: #444;
    background: #eee;
    padding: 3px 8px;
    margin-top: 6px;
    border-radius: 3px;
    display: inline-block;
    font-weight: normal;
}

/* File Attachment UI */
.thumb-preview { 
    display: flex; 
    gap: 10px; 
    align-items: center; 
    flex-wrap: wrap; 
    margin-top: 10px; 
}
.thumb-preview .thumb { 
    width: 80px; 
    height: 60px; 
    object-fit: cover; 
    border-radius: 6px; 
    border: 1px solid #ddd; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    cursor: pointer; 
    background: #eee; 
}
.clickable { cursor: pointer; }

.btn-del-file {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
    margin-left: 5px;
    font-weight: normal;
}
.btn-del-file input[type="checkbox"] {
    margin: 0 6px 0 0 !important;
    width: 14px !important;
    height: 14px !important;
    cursor: pointer;
}
.btn-del-file:hover {
    background: #ffe0e0;
    border-color: #f44336;
}

/* Reset Button for newly selected files */
.btn-file-reset {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
}
.btn-file-reset:hover {
    background: #eee;
    color: #333;
}
/* Modal from Comic Skin */
.modal {
  display: none;
  z-index: 1000;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: auto;
}
.modalBox {
  position: relative;
  text-align: center;
  margin: 5% auto;
  width: 90%;
  max-width: 1000px;
}
.modalBox img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}
@media (max-width: 640px) {
  .modalBox {
    margin-top: 20%;
  }
}

#wr_content_text_val,
#wr_content_links_val,
#wr_3_links_val,
.frm_input {
    color: #27292a !important;
    -webkit-text-fill-color: #27292a !important;
    opacity: 1 !important;
}

/* placeholder 색상 */
#wr_content_text_val::placeholder,
#wr_content_links_val::placeholder,
#wr_3_links_val::placeholder,
.frm_input::placeholder {
    color: #999 !important;
    -webkit-text-fill-color: #999 !important;
    opacity: 1 !important;
}