@charset "utf-8";

/* ==============================
   얼마야 타일 물량 산출기 스타일
   기존 Mg-basic 스타일 유지 + 산출기 전용 스타일 추가
   ============================== */

/* 기존 Mg-basic 스타일 유지 */
#bo_tag .nav-link.active { background:#fff; border-bottom:1px solid #fff; }
@media all and (max-width:767px) {
  .responsive #bo_list .float-left.float-md-none { margin-right:1.0rem; }
  .responsive #bo_list .na-title { margin-bottom:0.14rem; }
}
#bo_v_title { font-size:23px; font-weight:bold; line-height:1.4; letter-spacing:-1px; }
#bo_v_con { min-height:200px; word-break:break-all; overflow:hidden }
@media all and (max-width:575px) {
  .responsive #bo_v_title { font-size:20px; line-height:1.5; }
  .responsive #bo_v_con { min-height:140px; }
}
#bo_v_con img { max-width:100%; height:auto }
#bo_w .list-group-item { padding-left:0; padding-right:0; border-left:0; border-right:0; }
#bo_w #wr_content { margin-bottom:1.0rem !important; }
@media all and (max-width:575px) {
  #bo_w .list-group-item { padding-left:1.0rem; padding-right:1.0rem; }
}

/* 댓글 스타일 */
.cmt-reply { top:0; left:-16px; }
.cmt-content { word-break:break-all; overflow:hidden }
.cmt-content img { max-width:100%; height:auto }
.cmt-btn ul { list-style: none; margin: 0; }
.cmt-btn ul > li { float: left; font-size:12px; padding: 0 10px; }
.cmt-btn ul > li::before { float: left; color:#ccc; content: "|"; margin-left:-12px; }
.cmt-btn ul > li:last-child { padding-right:0; }
.cmt-btn ul > li:first-child::before,
.cmt-btn ul > li.no-bar::before { content: ""; margin-left:0; }
.cmt-btn ul > li > a { float:left; color:#888; white-space:nowrap; }
#fviewcomment #wr_content { resize:none; }
@media all and (max-width:575px) {
  .responsive .cmt-box { border-right:0 !important; }
  .responsive #bo_vc_w .cmt-box { border-left:0 !important; border-radius:0 !important; }
  .responsive #bo_vc_login { border-left:0 !important; border-right:0 !important; border-radius:0 !important; }
}
#bo_v_sns_icon { margin:-5px auto; }
#bo_v_sns_icon img { width:40px; border-radius:50%; margin:5px; }

/* ==============================
   타일 산출기 전용 스타일
   ============================== */

/* 산출기 헤더 */
.tc-header {
  background: linear-gradient(135deg, #C6562C 0%, #A84520 100%);
  color: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.tc-header h3 { margin: 0; font-size: 18px; font-weight: 800; }
.tc-header p { margin: 4px 0 0; font-size: 12px; opacity: 0.7; }

/* 스텝 인디케이터 */
.tc-steps {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}
.tc-step {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: #f5f5f5;
  color: #aaa;
  transition: all 0.2s;
}
.tc-step.active {
  background: #C6562C;
  color: #fff;
}
.tc-step.done {
  background: #FFF0EB;
  color: #C6562C;
}

/* 섹션 카드 */
.tc-section {
  border: 2px solid #e5e0da;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
  transition: border-color 0.2s;
}
.tc-section.active {
  border-color: #C6562C;
}
.tc-section-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #C6562C;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.tc-step-badge.inactive {
  background: #ccc;
}

/* DXF 업로드 영역 */
.tc-upload-zone {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #fafaf8;
}
.tc-upload-zone:hover {
  border-color: #C6562C;
  background: #FFF0EB;
}
.tc-upload-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #FFF0EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.tc-file-info {
  background: #EDFFF3;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 레이어 버튼 */
.tc-layer-btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e5e0da;
  background: #fafaf8;
  color: #6b6560;
  cursor: pointer;
  transition: all 0.2s;
  margin: 2px;
}
.tc-layer-btn:hover {
  border-color: #C6562C;
}
.tc-layer-btn.active {
  background: #C6562C;
  color: #fff;
  border-color: #C6562C;
}
.tc-layer-btn.suggested {
  background: #FFF0EB;
  color: #C6562C;
  border-color: #C6562C;
}

/* 타일 규격 버튼 */
.tc-tile-btn {
  padding: 8px 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #e5e0da;
  background: #fafaf8;
  color: #6b6560;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.tc-tile-btn:hover {
  border-color: #C6562C;
}
.tc-tile-btn.active {
  background: #C6562C;
  color: #fff;
  border-color: #C6562C;
}

/* 결과 카드 */
.tc-result-card {
  text-align: center;
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid #e5e0da;
  background: #fff;
}
.tc-result-card.accent {
  background: #C6562C;
  border-color: #C6562C;
  color: #fff;
}
.tc-result-card .label {
  font-size: 11px;
  margin-bottom: 4px;
}
.tc-result-card.accent .label { opacity: 0.7; }
.tc-result-card .value {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}
.tc-result-card .unit {
  font-size: 11px;
  font-weight: 600;
}
.tc-result-card.accent .unit { opacity: 0.8; }
.tc-result-card .sub {
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.6;
}

/* 계산 버튼 */
.tc-calc-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #C6562C 0%, #A84520 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(198,86,44,0.3);
}
.tc-calc-btn:hover { opacity: 0.9; }
.tc-calc-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 상세 정보 테이블 */
.tc-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 12px;
  padding: 12px;
  background: #fafaf8;
  border-radius: 8px;
}
.tc-info-grid .key { color: #6b6560; }
.tc-info-grid .val { text-align: right; font-weight: 700; color: #1a1a1a; }
.tc-info-grid .val.accent { color: #C6562C; }
.tc-info-grid .val.success { color: #2E7D4F; }

/* 뷰어 컨테이너 */
.tc-viewer {
  border: 1px solid #2a2a3e;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}

/* 결과 뷰 (view.skin.php) */
.tc-view-result {
  border: 2px solid #C6562C;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.tc-view-header {
  background: linear-gradient(135deg, #C6562C 0%, #A84520 100%);
  padding: 12px 16px;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.tc-view-body { padding: 16px; }

/* 리스트 뷰 */
.tc-list-item {
  border: 1px solid #e5e0da;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fff;
  transition: border-color 0.2s;
}
.tc-list-item:hover {
  border-color: #C6562C;
}
.tc-list-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #FFF0EB;
  color: #C6562C;
}

/* 수동 입력 모드 */
.tc-manual-area {
  border: 1px solid #e5e0da;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  background: #fafaf8;
}

/* 반응형 */
@media all and (max-width:575px) {
  .tc-header { padding: 12px 14px; }
  .tc-header h3 { font-size: 16px; }
  .tc-section { padding: 12px; }
  .tc-result-card .value { font-size: 20px; }
}