body {
  padding: 0;
  width: 100%;
  min-width: 360px;
  font:
    1rem "Lucida Grande",
    Helvetica,
    Arial,
    sans-serif,
    "NanumGothic",
    "MaruBuri";
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }

/*body {
  font-family: "MaruBuri", "Noto Serif KR", serif;
}*/

@font-face {
  font-family: "MaruBuri";
  src: url("/fonts/MaruBuri-ExtraLight.woff2") format("woff2");
  font-weight: 200;
}

@font-face {
  font-family: "MaruBuri";
  src: url("/fonts/MaruBuri-Light.woff2") format("woff2");
  font-weight: 300;
}

@font-face {
  font-family: "MaruBuri";
  src: url("/fonts/MaruBuri-Regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "MaruBuri";
  src: url("/fonts/MaruBuri-SemiBold.woff2") format("woff2");
  font-weight: 600;
}

@font-face {
  font-family: "MaruBuri";
  src: url("/fonts/MaruBuri-Bold.woff2") format("woff2");
  font-weight: 700;
}

@font-face {
  font-family: "NanumGothic";
  src: url("/fonts/NanumBarunGothic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NanumGothic";
  src: url("/fonts/NanumBarunGothicBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}
/*@font-face {
  font-family: "NanumGothic";
  src: url("/fonts/NanumBarunGothicUltralight.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}*/

.title-ko {
  font-family: "NanumBarunGothic", sans-serif;
  font-weight: 800;
}

.header-top {
  display: flex;
  align-items: center;
  /*background: #e9ecef; /* 지금 배경과 동일 */
  padding: 8px 12px;
}
.header-top a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo {
  height: 70px;
  margin-right: 10px;
}

.title-box {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.title-box a title-box a link{
  text-decoration: none;
}

.title-en {
  font-family: "NanumBarunGothic", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: #0a2540; /* 딥 네이비 (로고와 완벽 매칭) */
  letter-spacing: 0.5px;
  text-decoration: none;
}

.title-ko {
  font-family: "NanumBarunGothic", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #4a5a6a; /* 부드러운 서브 텍스트 */
}

.hub {
  color: #0fa3b1; /* 로고 색과 통일 → 브랜드 포인트 */
}

.submenu {
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "NanumBarunGothic", sans-serif;
  cursor: pointer;
}

a {
  /*color: #00b7ff;*/
  color: blue;
  text-decoration: none;
}

.withback-old {
  margin: 0;
  min-height: 100vh;
  z-index: 0;
  background-image: url("/images/puerto.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* 🔥 이게 핵심 */
  opacity: 0.3;
  z-index: -1;
  color: black;
}

.withback {
  position: relative;
  /*width: 100%;*/
  min-height: 100vh;
  /*padding: 10px;*/
  display: flex;
  flex-direction: column; /* ⭐ 이 줄 추가 */
}

/* 🔥 배경 이미지만 따로 레이어로 분리 */
.withback::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/puerto.png") center / cover no-repeat;
  opacity: 0.3; /* ← 여기서 배경만 흐림 */
  z-index: 0;
}

/* 🔥 내용은 위에 올림 */
.withback > * {
  position: relative;
  z-index: 1;
}

.contitleTitle {
  font-family: "NanumBarunGothic", sans-serif;
}

.menu {
  display: inline-block;
  margin-left: 4rem;
  color: white;
}

.menu-ko {
  display: inline-block;
  margin-left: 1rem;
  color: white;
  font-family: "NanumBarunGothic", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}

.menu-here, .menu-here a{
  display: inline-block;
  margin-left: 0.88rem;
  color: yellow;
  font-family: "NanumBarunGothic", sans-serif;
  font-weight: 500;
  font-size: 1rem;
}

/*.menu-here a{
  display: inline-block;
  margin-left: 1rem;
  color: yellow;
  font-family: "NanumBarunGothic", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}*/

.menu-selected {
  display: inline-block;
  margin-left: 1.5rem;
  background-color: #0a2540;
  color: yellow;
  font-family: "NanumBarunGothic", sans-serif;
  font-weight: 600;
  font-size: 1rem;
}

.hero {
  position: relative;
  height: 600px;
  background: url("/images/puerto.png") center / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 25, 55, 0.45); /* 🔥 핵심 */
}

.hero-title-worked {
  position: relative;
  color: #ffffff;
  /*color: #fc5e28;*/
  font-size: 3rem;
  font-weight: 800;
  z-index: 2;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.hero-title {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow:
    0 4px 12px rgba(0, 0, 0, 0.75),
    0 8px 25px rgba(0, 0, 0, 0.45);
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  color: black;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 12px 15px 12px;
  border-radius: 6px;
  z-index: 999;
}

.dropdown-content a {
  color: blue;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.grid2fr {
  display: grid;
  /*grid-template-columns: 1fr 1fr;*/
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
}

.grid3fr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.grid4fr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.grid73 {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: auto;
}

.grid46 {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-template-rows: auto;
}

.grid64 {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto;
}

.underline-title {
  font-size: 1.5rem;
  padding: 1rem 5px 5px 0.5rem;
  text-decoration: underline;
  color: black;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

#divPreview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/*.thumb-container {
      position: relative;
      width: 110px;
    }*/
.thumb-container {
  display: inline-block;
  width: 120px;
  /*height: 150px;*/
  /* PDF 아이콘, 이미지 모두 통일 */
  margin: 5px;
  text-align: center;
  vertical-align: top;
  /*border: 1px solid blue;*/
}

.thumb-container img,
.thumb-container canvas,
.thumb-container div {
  width: 110px;
  height: 110px;
  border: 1px solid #ccc;
  border-radius: 6px;
  object-fit: cover;
}

.thumb-container div[title="PDF"] {
  background: url("/images/pdf-icon.png") center/60% no-repeat #f7f7f7;
}

.thumb {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  background: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  cursor: pointer;
  font-size: 12px;
}

.ml6 {
  margin-left: 6px;
}

.ql-editor {
  tab-size: 10 !important;
  -moz-tab-size: 10 !important;
  -o-tab-size: 10 !important;
  min-height: 200px;
}

/* 기본 리스트 들여쓰기 간격 (첫 번째 레벨) */
.ql-editor ul,
.ql-editor ol {
  padding-left: 1rem; /* 기본값을 원하는 크기로 조절 */
}

/* 들여쓰기 레벨에 따른 간격 조절 */
.ql-editor .ql-indent-1 {
  padding-left: 2rem !important; /* 1단계 들여쓰기 */
}

.ql-editor .ql-indent-2 {
  padding-left: 3rem !important; /* 2단계 들여쓰기 */
}

.ql-editor .ql-indent-3 {
  padding-left: 4rem !important; /* 3단계 들여쓰기 */
}

/* 필요한 만큼 .ql-indent-{level} 클래스에 대한 스타일을 추가합니다. */

.replytext {
  display: inline-block;
  padding: 0 8px;
  width: 96%;
  line-height: 30px;
  height: 32px;
  border: 1px solid #dddbda;
  border-radius: 4px;
  background-color: #fff;
  color: rgb(8, 7, 7);
  transition:
    border 0.1s linear,
    background-color 0.1s linear;
}

/* 🔹 포커스 상태 */
.replytext:focus {
  border-color: #1b96ff;
  color: var(--sds-c-input-text-color-focus);
  box-shadow: 0 0 3px rgb(1, 118, 211);
  outline: none; /* ⭐ 점선 제거 */
}

.btnboard {
  /*background: #5cb85c;*/
  padding: 8px 12px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  font-size: 1rem;
  color: white;
  cursor: pointer;
}

.linkspan {
  cursor: pointer;
  color: blue;
  /*border-bottom: 1px solid blue;*/
  padding: 0 3px 2px 3px;
  margin-right: 15px;
}

/*게시판 Title div*/
.bnumber {
  display: inline-block;
  width: 3rem;
  border-right: 1px solid #cccccc;
  padding: 0.2rem 0.2rem;
  text-align: center;
  font-size: 0.9rem;
}
.btitle {
  display: inline-block;
  padding: 0.35rem 0.75rem;
}
.bview {
  display: inline-block;
  width: 3rem;
  font-size: 0.9rem;
  border-left: 1px solid #cccccc;
  padding: 0.1rem 0.1rem;
  text-align: center;
}

.boardParent {
  display: flex;
  align-items: center; /* 선택 */
  margin: 0 10px;
  border: 1px solid #cccccc;
  border-bottom: none;
}

.boardParent > div {
  display: inline-block; /* 기존 유지 */
}

.boardParent > div:last-child {
  margin-left: auto; /* 마지막 자식만 오른쪽 배치 */
}

.pagination {
  text-align: center;
}

/* 페이지네이션 기본 스타일 */
.post {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.pagination a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
}
.pagination a.active {
  background-color: #007bff;
  color: white;
  pointer-events: none;
}
.pagination a.disabled {
  color: #aaa;
  border-color: #eee;
  pointer-events: none;
}