@font-face {
    font-family: 'NotoSansLight';
	color:#666666;
    font-style: normal;
    font-weight: 10;
	letter-spacing: -0.2px;
	word-spacing:1px;
    src: local('Noto Sans Light'), local('NotoSans-Light'),
	url(/fonts/NotoSansKR-Light-Hestia.eot),
    url(/fonts/NotoSansKR-Light-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSansKR-Light-Hestia.woff) format('woff'),
    url(/fonts/NotoSansKR-Light-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansRegular';
    font-weight: 200;
	letter-spacing: -0.2px;
	word-spacing:1px;
    src: local('Noto Sans Regular'), local('NotoSans-Regular'),
	url(/fonts/NotoSansKR-Regular-Hestia.eot),
	url(/fonts/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype'),
	url(/fonts/NotoSansKR-Regular-Hestia.woff) format('woff'),
	url(/fonts/NotoSansKR-Regular-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansThin';
    font-weight: 200;
	letter-spacing: -0.2px;
	word-spacing:1px;
    src: local('Noto Sans Thin'), local('NotoSans-Thin'),
	url(/fonts/NotoSansKR-Thin-Hestia.eot),
    url(/fonts/NotoSansKR-Thin-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSansKR-Thin-Hestia.woff) format('woff'),
    url(/fonts/NotoSansKR-Thin-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansDemiLight';
    font-weight: 200;
	letter-spacing: -0.3px;
	word-spacing:1px;
    src: local('Noto Sans DemiLight'), local('NotoSans-DemiLight'),
	url(/fonts/NotoSansKR-DemiLight-Hestia.eot),
    url(/fonts/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
    url(/fonts/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}
@font-face {
    font-family: 'NotoSansBold';
    font-weight: 200;
	letter-spacing: -0.2px;
	word-spacing:1px;
    src: local('Noto Sans Bold'), local('NotoSans-Bold'),
	url(/fonts/NotoSansKR-Bold-Hestia.eot),
    url(/fonts/NotoSansKR-Bold-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSansKR-Bold-Hestia.woff) format('woff'),
    url(/fonts/NotoSansKR-Bold-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'NotoSansBlack';
    font-weight: 200;
	letter-spacing: -0.2px;
	word-spacing:1px;
    src: local('Noto Sans Black'), local('NotoSans-Black'),
	url(/fonts/NotoSansKR-Black-Hestia.eot),
    url(/fonts/NotoSansKR-Black-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/fonts/NotoSansKR-Black-Hestia.woff) format('woff'),
    url(/fonts/NotoSansKR-Black-Hestia.otf) format('opentype');
}


* { margin:0; padding:0; box-sizing:border-box; font-family:'NotoSansRegular';}

html, body {
    margin: 0;
    font-family:'NotoSansRegular';
}
body {
    font-family:'NotoSansRegular';
    background:#f4f6f9;
    color:#333;
    line-height:1.6;
    display: flex;
    flex-direction: column;
    height:auto;
    min-height: 100vh;
}
select, select option {
    font: normal 0.8rem'NotoSansRegular';
    color:black;
}

a {
    color:rgb(255, 178, 34);
    text-decoration:none;
}
a:hover {
    color:rgb(255, 207, 50);
    text-decoration:none;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 1px;
}
table, th, td {
    border: 1px solid #ccc;
    padding: 12px;
}
th {
    background-color: #f2f2f2;
    text-align:center;
}
tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* 마우스를 올렸을 때 행의 배경색 변경 */
tbody tr:hover {
    background-color: #e9e9e9;
}
/* 표이름 */
caption {
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 10px;
}

/* 기본 input 스타일 초기화 및 설정 */
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%; /* 부모 요소에 맞게 너비 조절 */
  padding: 12px 15px; /* 내부 여백 */
  margin: 8px 0; /* 상하 외부 여백 */
  display: inline-block;
  border: 1px solid #ccc; /* 기본 테두리 색상 */
  border-radius: 4px; /* 모서리 둥글게 */
  box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
  font-size: 1rem; /* 읽기 좋은 글꼴 크기 */
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* 부드러운 전환 효과 */
}

/* 플레이스홀더 스타일링 (선택 사항) */
input::placeholder {
  color: #999;
}

/* 포커스 시 시각적 피드백 (권장) */
input[type="text"]:focus {
  border-color: #4CAF50; /* 포커스 시 테두리 색상 변경 */
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* 은은한 그림자 효과 */
  outline: none; /* 브라우저 기본 아웃라인 제거 (대체 효과 필수) */
}

/* 유효성 검사 피드백 (예시) */
input:invalid {
  border-color: #f44336; /* 유효하지 않은 값 입력 시 빨간색 테두리 */
}

input:valid:not(:placeholder-shown) {
  border-color: #2196F3; /* 유효한 값 입력 시 파란색 테두리 (플레이스홀더 미표시 조건 추가) */
}
button {
  cursor: pointer; /* 마우스 오버 시 손가락 모양 커서로 변경 */
  border: none; /* 기본 테두리 제거 */
  padding: 12px 24px; /* 내부 여백 설정 */
  border-radius: 5px; /* 모서리를 둥글게 */
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease; /* 부드러운 애니메이션 효과 */
}

/* 주 색상 버튼 (예: 파란색) */
.btn-primary {
  background-color: #68a1de;
  color: white;
  box-shadow: 0 4px 6px rgba(0, 123, 255, 0.1); /* 은은한 그림자 */
}

.btn-primary:hover {
  background-color: #78b9ff;
  /* transform: translateY(-2px);  살짝 위로 이동하는 효과 */
}

.btn-primary:active {
  /* transform: translateY(0); 클릭 시 제자리로 돌아옴 */
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

/* 보조 색상 버튼 (예: 회색) */
.btn-secondary {
  background-color: #e9ecef;
  color: #333;
}

.btn-secondary:hover {
  background-color: #dae0e5;
  /* transform: translateY(-2px); */
}

.btn-secondary:active {
  transform: translateY(0);
}

.full-width-textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 패딩과 보더를 포함하여 너비/높이 계산 */
  display: block; /* 가끔 발생하는 불필요한 공백 제거 */
  margin: 0; /* textarea의 기본 마진 제거 */
  padding:1rem;
  resize: none; /* 사용자가 크기 조절 못하게 설정 (선택 사항) */
  color:black;
  font: normal 1rem 'NotoSansRegular';
}
.container {
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:0 1rem;
}
.page-container {
    width:80%;
    max-width:1100px;
    margin:0 auto;
    padding-top: 40px;
    padding-bottom:40px;
}

.language-selector { margin:0.8rem 0; text-align:left;}
.tableTitleWhite {color:white; text-shadow:1px 1px 1px rgba(0,0,0,0.4); font:normal 1rem 'NotoSansRegular';padding:10px; text-align:center; background-color:black;}
.img-shadow {box-shadow:1px 1px 5px rgba(0,0,0,0.6);}
.img-round {border-radius:10px;}


/* ==================== 헤더 & 네비게이션 ==================== */
header {
    background:#7d7d7d;
    color:white;
    text-shadow:1px 1px 1px rgba(0,0,0,0.4);
    padding:0.7rem 0;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

header .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo h1 {
    font-size:1.8rem;
    margin:0;
}

.logo a {
    color:white;
    text-decoration:none;
}

/* 데스크탑 메뉴 기본 */
.nav-menu {
    display:flex;
    gap:1.8rem;
    align-items:center;
}

.nav-menu a {
    color:white;
    text-decoration:none;
    text-shadow:1px 1px 1px rgba(0,0,0,0.4);
    font-weight:500;
    padding:0.2rem 0;
    transition:opacity .3s;
}

.nav-menu a:hover,
.nav-menu a.active {
    color:rgb(227, 255, 19)
}

/* 햄버거 버튼 */
.hamburger {
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    z-index:1001;
}

.hamburger span {
    width:28px;
    height:3px;
    background:white;
    margin:4px 0;
    display:block;
    border-radius:3px;
    transition:.4s;
}

/* ==================== 데스크탑 드롭다운 서브메뉴 ==================== */
@media (min-width: 769px) {
    .has-submenu {
        position: relative;
    }

    .submenu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
        min-width: 125px;
        background: #777;
        border:white;
        border-width:2px 0px 0px 0px;
        border-style:solid;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-radius: 0 0 7px 7px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.4);
        opacity: 0;
        visibility: hidden;
        transition: all 0.35s ease;
        padding: 0.5rem 0px 0.5rem 1rem;
        text-align: left;
        z-index: 999;
    }

    .has-submenu:hover .submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .submenu a {
        display: block;
        padding-left: 0rem;
        padding-right:0;
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .submenu a:hover {
        background: rgba(255,255,255,0.1);
        opacity: 1;
    }

    .has-submenu > a::after {
        content: " ▼";
        font-size: 0.7rem;
        margin-left: 1px;
        transition: transform 0.3s;
    }

    .has-submenu:hover > a::after {
        transform: rotate(180deg);
    }
}

/* ==================== 모바일 메뉴 (우측 30vw + 세로 리스트) ==================== */
@media (max-width: 768px) {
    .hamburger { display:block; }

    .page-container {
        width:95%;
        margin:0 auto;
        padding-top: 10px;
        padding-bottom:10px;
    }
    .nav-menu {
        position:fixed;
        top:76px;
        right:0;
        width:30vw;
        min-width:270px;                    /* 글자 안 잘리도록 최소폭 확보 */
        max-height:calc(100vh - 70px);
        overflow-y:auto;
        align-items:start;
        background:rgba(44,62,80,0.97);
        backdrop-filter:blur(15px);
        -webkit-backdrop-filter:blur(15px);
        border-left:1px solid rgba(255,255,255,0.1);
        border-bottom:1px solid rgba(255,255,255,0.1);
        border-bottom-left-radius:12px;
        box-shadow:-7px 7px 20px rgba(0,0,0,0.3);
        flex-direction:column;
        transform:translateX(100%);
        opacity:0;
        visibility:hidden;
        transition:all 0.4s cubic-bezier(0.68,-0.55,0.27,1.55);
        padding-left:1rem;
        padding-bottom:1rem;
    }

    .nav-menu.active {
        transform:translateX(0);
        opacity:1;
        visibility:visible;
    }

    .nav-menu a {
        padding-left:1rem;
        font-size:1.05rem;
        border-bottom:1px solid rgba(255,255,255,0.08);
        color:rgb(255, 255, 255);
        text-shadow:1px 1px 1px rgba(0,0,0,0.4);
    }

    /* 서브메뉴처럼 보이게 들여쓰기 + 색상 구분 */
    .nav-menu a[href^="/service/"],
    .nav-menu a[href^="/portfolio/"],
    .nav-menu a[href^="/news/"] {
        padding-left:3.8rem;
        font-size:1rem;
        color:rgba(255,255,255,0.9);
        text-shadow:1px 1px 1px rgba(0,0,0,0.4);
    }

    .nav-menu a:last-child {
        border-bottom:none;
    }
    .submenu {
        display:block;
        width:100px;
        height:10px;
        padding-bottom:40px;

    }
    .submenu a {
        display: block;
        min-width:200px;
        padding-left: 2rem;
        padding-right:0;
        padding-bottom:0;
        font-size: 0.95rem;
        opacity: 0.9;
        color:rgb(255, 255, 255);
        text-shadow:1px 1px 1px rgba(0,0,0,0.4);
    }
}

/* 햄버거 → X 애니메이션 */
.hamburger.active span:nth-child(1) { transform:translateY(11px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-11px) rotate(-45deg); }

/* ==================== 본문 & 푸터 ==================== */
main {
    flex:1;
}

h2 {
    color:#2c3e50;
}
section {
    margin-top:4rem;
}
footer {
    background:#7e7e7e;
    color:white;
    text-shadow:1px 1px 1px rgba(0,0,0,0.4);
    padding-top:20px;
    padding-bottom:60px;
    width:100%;
    text-align:center;
    justify-content: f
}

footer .container {
    padding-top:0px;
}

footer small {
    opacity:0.8;
    font-size:0.9rem;
}