/* ==========================
  UTILITIES
========================== */
.w100{width:100%;}
.show{display:block;}
.hide{display:none;}
.blind{display:none;}

.radius-5{border-radius:5px;}
.radius-10{border-radius:10px;}
.radius-20{border-radius:20px;}

.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f24{font-size:24px;}
.f26{font-size:26px;}
.f28{font-size:28px;}
.f30{font-size:30px;}
.f32{font-size:32px;}
.f34{font-size:34px;}
.f36{font-size:36px;}

.b400{font-weight:400;}
.b500{font-weight:500;}
.b700{font-weight:700;}

/* ==========================
  TEXT STRING - subject spotkey, summary 

  word-break: keep-all; 한글 기준
  word-break: break-all; 긴 URL만 줄바꿈 (x)
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-text-size-adjust: 100%;
========================== */
.keepall{
  word-break: keep-all;
} 
.spotkey {color:var(--text-spotkey);}

/* ==========================
  IMAGE
========================== */
.nsp-lazy {
  filter: blur(10px);
  transition: filter .3s;
}
.lazy-loaded { filter: blur(0);}

/* effect - image wrap effect wrap */
.wrap-image {overflow:hidden;}
.wrap-image img {
 transform:scale(1);
 -webkit-transform:scale(1);
 -moz-transform:scale(1);
 -o-transform:scale(1);
 -webkit-transition:.3s;
 -moz-transition:.3s;
 -ms-transition:.3s;
 }
.wrap-image:hover img {
 transform:scale(1.05);
 -webkit-transform:scale(1.05);
 -moz-transform:scale(1.05);
 -o-transform:scale(1.05);
 -webkit-transition:.3s;
 -moz-transition:.3s;
 -ms-transition:.3s;
}

img.no-full {
  width: auto !important;
}

.image {
  background: var(--bg-color-gray);
}

.photo-resize {
  display:block;
  overflow:hidden;
  background-size: cover;
  background-origin: padding-box;
  background-position: center;
  background-repeat:no-repeat;
}

/* photo-resize 이외의 이미지는 position:relative 적용 필수*/
.photo-resize img{
  width:100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius:0;
}
.photo-resize img.no-full {
  width: auto !important;
  height: auto !important;
  position: static;
  transform: none;
}

/* ==========================
   material-icons+ Font 
========================== */
.icon-group-layer {
  border:1px solid var(--blue);
  border-radius:30px;
  padding:2px 3px;
}
.icon-group {
  display: inline-flex;
  align-items: center;
  gap:5px;
  vertical-align: middle;
  border:1px solid var(--blue);
}
.icon-group .icon {
  font-size: 14px;
  line-height: 1; 
}
.icon-group .icon-text {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
  line-height: 1; /* 높이 어긋남 방지 */
}
/*===========================
TABLE
blue ==> #7f9db9, #255D9E, #1aa3cc,#23a9e0,#38b7d5, #49c0d8, #e5f4f7, #e0f0ff, #f3f9fd, F3F9FD
border-collapse:collapse - 테두리를 하나로 합치는 것
border-collapse:separate - 테두리 따로 설정(기본값)
===========================*/
table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:10px;
  word-break:break-word;
}

table caption{display:none;}

/* THEAD */
table thead{
  background:var(--blue-4);
  text-align:center;
}

/* TFOOT */
table tfoot{
  background:var(--gray-fa);
}

/* BORDER */
table tr,
table th,
table td{
  border:1px solid var(--gray-ddd);
}

/* CELL */
table th,
table td{
  text-align:center;
  vertical-align:middle;
}
table tbody th{
  font-weight:400;
}

/* FORM ELEMENT INSIDE TABLE */
table td input,
table td select,
table td textarea{
  margin:3px 0;
}

/* ROW STATE */	
table tr.on,
table tr.top,
table td.top{
  background:var(--yellow-3);
}
table.hover tbody tr:hover{
  background:var(--yellow-4);
}

/* OPTION */
table.separate{
  border-collapse:separate;
  border-spacing:10px;
}

table.margin0{
  margin:0;
}

table.left td{
  text-align:left;
}
table.right td{
  text-align:right;
}
table th .oneline,
table td .oneline{
  display:block;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  height: 22px;
}

table.padding5 th, table.padding5 td{padding:5px;}
table.padding7 th, table.padding7 td{padding:7px;}
table.padding10 th, table.padding10 td{padding:10px;}
table.padding15 th, table.padding15 td{padding:15px;}
table.padding20 th, table.padding20 td{padding:20px;}
table.padding30 th, table.padding30 td{padding:30px;}


/*===========================
   tooltip
===========================*/
/* 툴팁 래퍼: 기존 버튼 스타일 유지하며 기준점 설정 */
.tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 툴팁 본체: Gemini 스타일 (다크 모드 느낌) */
.tooltip-content {
    position: absolute;
    top: 140%; /* 버튼 아래쪽 배치 */
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    
    background-color: rgba(33, 33, 33, 0.95);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px; /* 상단바에 맞게 약간 작게 */
    font-weight: normal;
    white-space: nowrap;
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 화살표 (말꼬리) */
.tooltip-content::after {
    content: "";
    position: absolute;
    bottom: 100%; /* 툴팁 위쪽에 화살표 배치 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(33, 33, 33, 0.95) transparent;
}

/* 호버 시 노출 */
.tooltip-wrapper:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}