/* ============================================================
   업소용 기업형 템플릿 (main_type = 2)
   ------------------------------------------------------------
   이 파일은 CorporateClubHeader / CorporateClubMain /
   CorporateClubFooter 에서만 불러온다. main_type이 2가 아닌
   사이트는 이 파일 자체를 받지 않으므로 기존 디자인에 영향이 없다.

   방문자 상당수가 연령대가 높은 편이라 글자 크기와 대비를
   넉넉하게 잡았고, 전화번호를 가장 눈에 띄게 배치했다.
   ============================================================ */

/* 색은 문서 전체에 걸어 둔다. 게시판·앨범처럼 기업형 마크업 바깥에 있는
   화면들도 이 색들을 쓰기 때문이다. 이 파일 자체가 기업형 사이트에만
   실리므로 다른 사이트에는 이 값들이 아예 존재하지 않는다. */
:root {
    --corp-ink: #12385e;
    --corp-acc: #0f7ac0;
    --corp-line: #dfe5ea;
    --corp-mut: #5d6b78;
}

.corp-page,
.corp-header,
.corp-util,
.corp-adminbar,
.corp-footer {
    box-sizing: border-box;
    font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "맑은 고딕", sans-serif;
}

.corp-page *,
.corp-header *,
.corp-footer * { box-sizing: border-box; }

/* ---------- 상단 유틸 줄 (지역 / 로그인) ---------- */
.corp-util {
    position: relative;
    background: #0d2942;
    color: #c5d6e5;
    font-size: 12px;
    padding: 7px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.corp-util a { color: #dbe7f0; text-decoration: none; margin-left: 14px; }
.corp-util a:hover { text-decoration: underline; }
.corp-util-right > div { display: inline; }

/* 내 계정 메뉴 - 이름 위에 올리면 펼쳐진다 */
.corp-account { position: relative; display: inline-block; }
.corp-account-name { display: inline-block; padding: 4px 0; }
.corp-account-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    min-width: 190px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--corp-line);
    box-shadow: 0 6px 20px rgba(13, 41, 66, 0.18);
    text-align: left;
}
.corp-account:hover .corp-account-menu,
.corp-account-menu.is-open { display: block; }
.corp-account-menu a {
    display: block;
    margin: 0;
    padding: 9px 16px;
    color: #2b3a46;
    font-size: 13px;
    white-space: nowrap;
}
.corp-account-menu a:hover { background: #f3f6f8; color: var(--corp-ink); text-decoration: none; }
.corp-account-clubs {
    border-bottom: 1px solid var(--corp-line);
    margin-bottom: 6px;
    padding-bottom: 6px;
}
.corp-account-clubs a { color: var(--corp-ink); font-weight: 700; }

/* 로그인 상자 - 로그인 링크를 눌렀을 때만 펼쳐진다 (is-open) */
.corp-loginbox {
    display: none;
    position: absolute;
    top: 100%;
    right: 28px;
    z-index: 60;
    width: 232px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--corp-line);
    box-shadow: 0 6px 20px rgba(13, 41, 66, 0.18);
    text-align: left;
}
.corp-loginbox.is-open { display: block; }
.corp-loginbox input[type="text"],
.corp-loginbox input[type="password"] {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 9px 10px;
    border: 1px solid var(--corp-line);
    font-size: 14px;
    font-family: inherit;
}
.corp-loginbox a.corp-loginbtn {
    display: block;
    margin: 0 0 10px;
    padding: 10px 0;
    background: var(--corp-ink);
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.corp-loginbox a.corp-loginbtn:hover { background: var(--corp-acc); text-decoration: none; }
.corp-loginerr {
    margin-bottom: 10px;
    color: #b3261e;
    font-size: 12.5px;
    line-height: 1.5;
}
.corp-loginbox a.corp-loginfind {
    margin: 0;
    color: var(--corp-mut);
    font-size: 12px;
}

/* ---------- 헤더 / 네비게이션 ---------- */
.corp-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 28px;
    background: #fff;
    border-bottom: 1px solid var(--corp-line);
}
.corp-brand { text-decoration: none; flex: none; }
.corp-brand-name {
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: var(--corp-ink);
    letter-spacing: -0.02em;
}
.corp-brand-sub {
    display: block;
    font-size: 10.5px;
    color: var(--corp-mut);
    letter-spacing: 0.14em;
    margin-top: 2px;
}

.corp-nav {
    display: flex;
    gap: 26px;
    margin-left: auto;
    flex-wrap: wrap;
}
.corp-nav a {
    color: #2b3a46;
    text-decoration: none;
    font-size: 15px;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.corp-nav a:hover { color: var(--corp-ink); }
.corp-nav a.on {
    color: var(--corp-ink);
    font-weight: 700;
    border-bottom-color: var(--corp-acc);
}

/* 전화번호 - 이 사이트들에서 가장 중요한 행동 유도 */
.corp-phone {
    flex: none;
    text-align: right;
    text-decoration: none;
    margin-left: 8px;
}
.corp-phone small {
    display: block;
    font-size: 10.5px;
    color: var(--corp-mut);
    letter-spacing: 0.1em;
}
.corp-phone b {
    font-size: 20px;
    color: var(--corp-ink);
    font-variant-numeric: tabular-nums;
}

/* 모바일 메뉴 버튼 - 넓은 화면에서는 숨긴다 */
.corp-navtoggle {
    display: none;
    margin-left: auto;
    width: 42px; height: 36px;
    border: 1px solid var(--corp-line);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px 9px;
}
.corp-navtoggle span {
    display: block;
    height: 2px;
    background: var(--corp-ink);
    margin: 3px 0;
}

/* ---------- 관리자 전용 줄 ---------- */
.corp-adminbar {
    background: #f3f6f8;
    border-bottom: 1px solid var(--corp-line);
    padding: 8px 28px;
    font-size: 12.5px;
    color: var(--corp-mut);
}
.corp-adminbar span { font-weight: 700; margin-right: 12px; }
.corp-adminbar a { color: var(--corp-ink); text-decoration: none; margin-right: 16px; }
.corp-adminbar a:hover { text-decoration: underline; }
/* 방문자 수는 사장에게만 보이는 정보라 링크들과 떨어뜨려 오른쪽 끝에 둔다 */
.corp-adminbar-visits { float: right; margin-right: 0; color: var(--corp-mut); }
.corp-adminbar-visits b { color: var(--corp-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .corp-adminbar-visits { float: none; display: block; margin-top: 6px; }
}

/* ---------- 틀 ----------
   원래 화면은 좌·우 메뉴를 끼고 가운데가 남는 폭을 쓰도록 짜여 있다.
   기업형에서는 좌·우를 걷어냈으므로 가운데가 폭 전체를 가져가야 한다.
   이 파일은 기업형 사이트에서만 실리므로 다른 사이트의 틀은 그대로다.

   가운데 칸은 좌 240px / 우 300px를 비워 두도록 되어 있다. 그 여백을 확실히
   걷어내려고 선택자를 한 단계 좁혔다(#FrameContainer). */
/* 예전 화면들은 1200px 아래로는 내려가지 않도록 짜여 있어 좁은 화면에서
   가로 스크롤이 생긴다. 기업형은 폭에 맞춰 접히도록 그 바닥을 푼다. */
#BodyFrame {
    min-width: 0;
    overflow-x: hidden;
}

#FrameContainer .MiddleFrame {
    float: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
}
#FrameContainer .LeftFrame,
#FrameContainer .RightFrame { display: none; }

/* 관리 화면과 게시판은 좁은 칸에 맞춰 만들어진 것들이라 폭을 다 주면
   항목들이 양끝으로 흩어져 되레 읽기 나빠진다. 홈 화면(.corp-page)은
   이 상자 밖에 있으므로 넓은 그대로 둔다. */
#FrameContainer .ClubBoardContainer,
#FrameContainer .ClubPhotoContainer {
    max-width: 940px;
    margin: 0 auto;
    padding: 28px 24px 40px;
    border: 0;   /* Club.css의 은색 테두리는 기업형 화면과 어울리지 않는다 */
}

/* ---------- 게시판·앨범을 기업형 옷으로 ----------
   두 화면은 글쓰기·수정·삭제까지 들어 있는 큰 컨트롤이라 손대지 않는다.
   대신 이 파일이 기업형 사이트에만 실린다는 점을 이용해 겉모습만 바꾼다.
   다른 커뮤니티들의 게시판은 지금 그대로다.
   #FrameContainer를 앞에 붙인 것은 컨트롤 안에 박혀 있는 style 블록보다
   확실히 뒤에 오기 위해서다. */

#FrameContainer .ClubBoardTitle {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--corp-ink);
    letter-spacing: -0.01em;
}
#FrameContainer .ClubVisitInfo {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--corp-mut);
}
#FrameContainer .ClubBoardContainer hr,
#FrameContainer .ClubHr {
    border: 0;
    border-top: 1px solid var(--corp-line);
    margin: 18px 0 4px;
}

/* 버튼 - 사이트 전반과 같은 남색 계열로 */
#FrameContainer .ClubButton {
    display: inline-block;
    padding: 9px 18px;
    background: var(--corp-ink);
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
#FrameContainer .ClubButton:hover { background: var(--corp-acc); color: #fff; }
#FrameContainer .WriteButtonContainer { margin: 16px 0; }
#FrameContainer .BoardButton { margin-top: 22px; text-align: center; }
#FrameContainer .BoardButton .ClubButton { margin: 0 3px; }

/* 글 한 줄 */
#FrameContainer .BoardContainer.ParentBoardContainer {
    padding: 16px 2px;
    border-bottom: 1px solid var(--corp-line);
}
#FrameContainer .BoardContainer.ParentBoardContainer:hover { background: #fafbfc; }
#FrameContainer .BoardMainContainer a { color: #22303b; text-decoration: none; }
#FrameContainer .BoardMainContainer a:hover { color: var(--corp-acc); }
#FrameContainer .BoardDate {
    color: var(--corp-mut);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
#FrameContainer .BoardContent { margin-top: 8px; line-height: 1.75; }
/* 글 안의 사진이 원본 크기로 나오면 한 글이 화면을 통째로 먹는다.
   목록을 훑을 수 있어야 하므로 높이를 묶어 둔다. 비율은 그대로다. */
#FrameContainer .BoardContent img {
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
}

/* 댓글은 한 칸 들여써서 원글과 구분 */
#FrameContainer .CommentContainer { margin-left: 22px; }
#FrameContainer .BoardContainer.CommentBoardContainer {
    padding: 12px 2px;
    border-top: 1px solid #eef2f5;
}
#FrameContainer .UserImage { border-radius: 50%; }

/* 글쓰기 상자 */
#FrameContainer .WriteContainer {
    margin: 16px 0 24px;
    border: 1px solid var(--corp-line);
    background: #fff;
}
#FrameContainer .WriteInnerContainer { border-bottom: 1px solid #eef2f5; }
#FrameContainer .WriteInnerContainer:last-child { border-bottom: 0; }
#FrameContainer .HeaderSection {
    padding: 10px 14px 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--corp-mut);
}
#FrameContainer .BodySection { padding: 0 14px 12px; }
#FrameContainer .BodySection input[type="text"] {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--corp-line);
    font-family: inherit;
    font-size: 14px;
}

/* 쪽 번호 - 원래 빨간색이라 사이트와 따로 놀았다 */
#FrameContainer .pagination-box { margin-bottom: 40px; }
#FrameContainer .pagination-box ul.pagination-list li a {
    border-color: var(--corp-line);
    font-family: inherit;
    font-size: 13px;
}
#FrameContainer .pagination-box ul.pagination-list li a:hover,
#FrameContainer .pagination-box ul.pagination-list li a.active {
    background: var(--corp-ink);
    border-color: var(--corp-ink);
    color: #fff;
}

/* 수정/삭제 단추는 오른쪽 끝에서 35px 떨어진 자리에 고정돼 있다. 두 글자짜리
   한국어에는 맞지만 Edit/Delete는 그보다 넓어 서로 겹친다. 자리를 넓혀 준다. */
#FrameContainer .EditBoard,
#FrameContainer .CommentEditBoard,
#FrameContainer .PhotoContentWrapper .PhotoEdit,
#FrameContainer .PhotoComment .PhotoCommentHeader .PhotoCommentEdit {
    right: 62px;
}
#FrameContainer .EditBoard,
#FrameContainer .DeleteBoard,
#FrameContainer .CommentEditBoard,
#FrameContainer .CommentDeleteBoard,
#FrameContainer .PhotoContentWrapper .PhotoEdit,
#FrameContainer .PhotoContentWrapper .PhotoDelete {
    white-space: nowrap;
    font-size: 12.5px;
}

/* ---------- 앨범 ----------
   원래는 사진 한 장이 한 줄을 다 쓰며 세로로 이어진다. 업소 사이트에서는
   앨범이 곧 포트폴리오라 한눈에 여러 장이 보여야 하므로 세 칸으로 깐다.
   카드 안에서 사진을 위로 올린다(원래 마크업은 글이 먼저 온다). */
#FrameContainer #PhotoMainContainer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
#FrameContainer .PhotoFrameContainer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--corp-line);
    background: #fff;
    overflow: hidden;
}
#FrameContainer .PhotoFrameContainer:hover { border-color: #9fb3c4; }

#FrameContainer .PhotoFrame { order: -1; margin: 0; }
#FrameContainer .PhotoFrame img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    background: #eef2f6;
}

#FrameContainer .PhotoContentFrame { padding: 12px 14px 14px; }
#FrameContainer .PhotoContentWrapper { margin: 0; }

/* 좁은 칸에서 기본 아바타까지 넣으면 어수선해진다 */
#FrameContainer .PhotoFrameContainer .UserImage { display: none; }
#FrameContainer .PhotoOwner {
    display: none;
}
#FrameContainer .PhotoDate {
    display: block;
    color: var(--corp-mut);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
#FrameContainer .PhotoContent {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.6;
}
#FrameContainer .PhotoContent img { max-width: 100%; height: auto; }

/* 좁은 화면에서도 두 장씩 유지한다. 한 장씩 세로로 세우면 스크롤만 길어지고
   포트폴리오를 훑는 느낌이 사라진다. */
@media (max-width: 768px) {
    #FrameContainer #PhotoMainContainer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #FrameContainer .PhotoFrame img { height: 150px; }
    #FrameContainer .PhotoContentFrame { padding: 10px 11px 12px; }
}
@media (max-width: 400px) {
    #FrameContainer .PhotoFrame img { height: 120px; }
}

/* ---------- 본문 ---------- */
.corp-page { background: #fff; color: #1e2a34; font-size: 15px; line-height: 1.75; }

.corp-hero {
    background: linear-gradient(120deg, #173f66, #0d2942);
    color: #fff;
    padding: 52px 28px 46px;
}
.corp-hero-in { width: 100%; max-width: 1180px; margin: 0 auto; }

/* 상단 이미지를 올린 경우. 자르지 않고 원래 비율 그대로 폭에 맞춘다 -
   홍보 그림은 귀퉁이가 잘리면 전화번호나 주소가 함께 잘려 나간다. */
.corp-herophoto { line-height: 0; background: #0d2942; }
.corp-herophoto img { display: block; width: 100%; height: auto; }

/* 두 번째 띠. 위 띠와 붙어 버리지 않게 사이를 띄운다. */
.corp-secondbanner { margin-top: 12px; }

/* 폭은 늘 화면에 꽉 채우고 높이만 600px에서 끊는다. 세로로 긴 그림은
   줄이지 않고 위아래를 잘라 낸다 - 줄이면 양옆에 빈 띠가 생겨 더 어색하다.
   그림이 600px보다 낮으면 아무 일도 일어나지 않는다. */
.corp-secondbanner img {
    max-height: 600px;
    object-fit: cover;
    object-position: center;
}

.corp-hero h1 {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.35;
    letter-spacing: -0.02em;
}
.corp-hero p {
    margin: 0;
    color: #dbe7f0;
    font-size: 15.5px;
    max-width: 60ch;
}

.corp-sec { padding: 40px 28px; }
.corp-sec-alt { background: #f6f8fa; }

/* 색 띠는 화면 끝까지 가되 내용물은 첫 화면과 같은 폭으로 가운데 모은다.
   이게 없으면 제목만 가운데, 사진은 왼쪽 끝에 붙어 따로 논다. */
.corp-sech,
.corp-grid,
.corp-news { max-width: 1320px; margin-left: auto; margin-right: auto; }

.corp-sech {
    position: relative;
    text-align: center;
    margin-bottom: 26px;
}
.corp-sech small {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--corp-acc);
    font-weight: 700;
}
.corp-sech h2 {
    margin: 6px 0 0;
    font-size: 23px;
    letter-spacing: -0.01em;
}
.corp-more {
    position: absolute;
    right: 0;
    bottom: 2px;
    font-size: 13px;
    color: var(--corp-mut);
    text-decoration: none;
}
.corp-more:hover { color: var(--corp-ink); }

.corp-about { max-width: 76ch; margin: 0 auto; }
.corp-about img { max-width: 100%; height: auto; }

/* 본문은 편집기로 쓰이므로 어떤 태그가 와도 읽히게 기본을 잡아 둔다. */
.corp-about-text h2 { font-size: 20px; margin: 26px 0 8px; }
.corp-about-text h3 { font-size: 17px; margin: 22px 0 6px; }
.corp-about-text h2:first-child,
.corp-about-text h3:first-child { margin-top: 0; }
.corp-about-text p { margin: 0 0 14px; }
.corp-about-text ul,
.corp-about-text ol { margin: 0 0 14px; padding-left: 22px; }
.corp-about-text li { margin-bottom: 5px; }
.corp-about-text table { border-collapse: collapse; max-width: 100%; }
.corp-about-text td, .corp-about-text th { border: 1px solid var(--corp-line); padding: 7px 10px; }

/* 소개용 사진이 있으면 글과 나란히 놓는다.
   폭은 다른 영역과 같은 1320px에 맞추고 좌우를 반씩 나눈다. 예전에는
   1080px을 5:7로 갈라 사진이 437px까지 줄었는데, 올라오는 사진이 보통
   900px쯤 되므로 화질까지 버리고 있었다.
   위 배너처럼 화면 끝까지 늘리지는 않는다 - 읽는 글은 어느 정도에서
   멈춰야 하고, 배너보다 넓어 보이면 층이 어긋나 보인다. */
.corp-about.has-image {
    max-width: 1320px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}
/* 올라오는 사진이 세로로 긴 경우가 있어 상자 비율을 정해 두고 채워 넣는다.
   그러지 않으면 사진 한 장이 화면을 몇 배로 늘려 버린다. */
.corp-about-img {
    position: relative;
    padding-top: 68%;
    overflow: hidden;
    background: #eef2f6;
}
.corp-about-img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
@media (max-width: 760px) {
    .corp-about.has-image { grid-template-columns: 1fr; gap: 20px; }
}
.corp-empty { color: var(--corp-mut); font-size: 14px; text-align: center; }

/* 사진 격자 - 원본 비율이 제각각이라 상자를 고정하고 잘라 맞춘다 */
.corp-grid {
    display: grid;
    /* auto-fit이라야 사진이 적을 때 빈 칸이 접히고 남은 폭을 나눠 갖는다.
       auto-fill이면 사진 넉 장이 왼쪽에 몰리고 오른쪽이 텅 빈다. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
/* 220px 규칙대로면 휴대폰에서 한 줄에 한 장이 된다. 앨범 화면과 같이
   두 장씩 놓아 첫 화면에서 더 많이 보이게 한다. */
@media (max-width: 768px) {
    .corp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .corp-thumb-cap { font-size: 12.5px; }
}
.corp-thumb { text-decoration: none; color: inherit; display: block; }
.corp-thumb-img {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 72%;
    overflow: hidden;
    border: 1px solid var(--corp-line);
    background: #eef2f6;
}
.corp-thumb-img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.corp-thumb:hover .corp-thumb-img { border-color: #9fb3c4; }
.corp-thumb-cap {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- 문의하기 화면 ---------- */
.corp-contact {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    /* 지도는 높이가 고정이고 왼쪽은 내용에 따라 길어지므로, 지도가 위에
       붙어 있으면 한쪽만 떠 있는 모양이 된다. 세로 가운데에 맞춘다. */
    align-items: center;
}
.corp-contact-list { list-style: none; margin: 0 0 28px; padding: 0; }
.corp-contact-list li {
    display: flex;
    gap: 14px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--corp-line);
}
.corp-contact-list span {
    flex: none;
    width: 62px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--corp-mut);
    padding-top: 2px;
}
.corp-contact-list a { color: var(--corp-ink); text-decoration: none; font-weight: 700; }
.corp-contact-list a:hover { color: var(--corp-acc); }

.corp-form h3 { margin: 0 0 14px; font-size: 17px; color: var(--corp-ink); }
.corp-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--corp-mut);
}
.corp-form input[type="text"],
.corp-form textarea {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 11px;
    border: 1px solid var(--corp-line);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
}
.corp-form textarea { resize: vertical; }
.corp-form-btn {
    padding: 12px 30px;
    border: 0;
    background: var(--corp-ink);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}
.corp-form-btn:hover { background: var(--corp-acc); }
.corp-form-ok,
.corp-form-err {
    margin-bottom: 14px;
    padding: 11px 13px;
    font-size: 13.5px;
    line-height: 1.6;
}
.corp-form-ok { background: #eaf3ea; color: #1e5b2a; }
.corp-form-err { background: #fbeceb; color: #b3261e; }

/* 자동 프로그램용 미끼 - 사람에게는 보이지 않아야 한다 */
.corp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.corp-map {
    width: 100%;
    height: 460px;
    border: 1px solid var(--corp-line);
    display: block;
}

@media (max-width: 860px) {
    .corp-contact { grid-template-columns: 1fr; gap: 24px; }
    .corp-map { height: 300px; }
}

/* 게시글 목록 */
.corp-news { list-style: none; margin: 0; padding: 0; max-width: 900px; margin: 0 auto; }
.corp-news li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 13px 4px;
    border-bottom: 1px solid var(--corp-line);
}
.corp-news li:last-child { border-bottom: 0; }
.corp-news a {
    flex: 1;
    color: #22303b;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.corp-news a:hover { color: var(--corp-acc); text-decoration: underline; }
.corp-news time {
    font-size: 13px;
    color: var(--corp-mut);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 하단 문의 영역 */
.corp-cta {
    background: var(--corp-ink);
    color: #fff;
    padding: 30px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.corp-cta h2 { margin: 0; font-size: 20px; }
.corp-cta p { margin: 6px 0 0; color: #b9cddd; font-size: 14px; }
.corp-ctaphone {
    background: #fff;
    color: var(--corp-ink);
    padding: 12px 26px;
    font-size: 22px;
    font-weight: 800;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- 하단 ---------- */
.corp-footer {
    background: #fafbfc;
    border-top: 1px solid var(--corp-line);
    padding: 18px 28px;
    font-size: 12.5px;
    color: var(--corp-mut);
}
.corp-footer-in {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.corp-footer b { color: #2b3a46; margin-right: 10px; }
.corp-footer a { color: var(--corp-mut); text-decoration: none; }
.corp-footer a:hover { text-decoration: underline; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 900px) {
    .corp-header { flex-wrap: wrap; padding: 14px 18px; }
    .corp-navtoggle { display: block; }
    .corp-nav {
        display: none;
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--corp-line);
        margin-top: 12px;
    }
    .corp-nav.is-open { display: flex; }
    .corp-nav a {
        padding: 12px 2px;
        border-bottom: 1px solid #eef2f5;
    }
    .corp-nav a.on { border-bottom-color: #eef2f5; }
    /* 좁은 화면에서는 번호가 머리말을 혼자 다 차지해 버린다 */
    .corp-phone { order: -1; margin-left: 0; text-align: left; }
    .corp-phone b { font-size: 16px; }
    .corp-phone small { font-size: 10px; }

    .corp-util { padding: 7px 18px; font-size: 11.5px; }
    .corp-loginbox { right: 18px; left: 18px; width: auto; }
    .corp-adminbar { padding: 8px 18px; }
    .corp-hero { padding: 36px 18px 32px; }
    .corp-hero h1 { font-size: 24px; }
    .corp-sec { padding: 30px 18px; }
    .corp-sech { text-align: left; }
    .corp-more { position: static; display: inline-block; margin-top: 6px; }
    .corp-cta { padding: 24px 18px; }
    /* 손가락으로 누를 수 있을 만큼은 남기되 화면을 가로지르지 않게 줄인다 */
    .corp-ctaphone { font-size: 18px; padding: 11px 20px; }
    /* 꼬리말은 좁은 화면에서 두 칸이 위아래로 쌓이므로 가운데로 모으고,
       주소·전화 줄은 한 단계 줄여 두 줄 넘게 늘어지지 않게 한다. */
    .corp-footer { padding: 18px; font-size: 11.5px; text-align: center; }
    .corp-footer-in { justify-content: center; gap: 8px; }
    .corp-footer-left,
    .corp-footer-right { width: 100%; }
    .corp-footer b { display: block; margin: 0 0 3px; }
}