@charset "utf-8";
/* =============================================================================
* refine.css — 디자인 보정 레이어
* =============================================================================
* 기존 CSS는 하나도 건드리지 않고, 맨 마지막에 얹어서 다듬기만 합니다.
* 되돌리려면 layouts/main.blade.php 와 layouts/sub.blade.php 에서
* 이 파일 한 줄씩만 지우면 원래대로 돌아옵니다.
*
* 원칙: 레이아웃과 브랜드 색은 그대로 두고, 질감만 정리합니다.
* - 색 팔레트 교체 X, 구조 변경 X, 폰트 교체 X
* - 한글 조판 / 여백 리듬 / 모서리 / 그림자 / 전환효과만 손봅니다
*
* 기준: html { font-size:10px } 이므로 1rem = 10px 입니다.
* ============================================================================= */
:root {
/* 기존 토큰(--z-blue:#152444 등)은 그대로 두고, 보정용만 추가합니다. */
--rf-line: rgba(21, 36, 68, .10); /* 브랜드 네이비 기반 헤어라인 */
--rf-line-soft: rgba(21, 36, 68, .06);
--rf-surface: #f7f8fa; /* 기존 #f5f5f5 보다 살짝 차갑고 옅게 */
--rf-shadow: 0 1px 2px rgba(16, 26, 48, .04), 0 8px 24px rgba(16, 26, 48, .06);
--rf-shadow-hover: 0 2px 4px rgba(16, 26, 48, .06), 0 12px 32px rgba(16, 26, 48, .10);
--rf-ease: cubic-bezier(.4, 0, .2, 1);
}
/* -----------------------------------------------------------------------------
* 1. 한글 조판
* -----------------------------------------------------------------------------
* common.css 의 html 에 word-break:break-all 이 걸려 있어서 한글이 단어 중간에서
* 끊깁니다("안녕하 / 세요"). 한국어는 keep-all 로 어절 단위로 끊는 것이 표준이고,
* 이것만 바꿔도 글이 훨씬 정돈되어 보입니다.
* 긴 URL 처럼 끊을 곳이 없는 문자열은 overflow-wrap 으로 처리합니다.
* -------------------------------------------------------------------------- */
p, li, dd, dt, td, th, figcaption, blockquote,
h1, h2, h3, h4, h5, h6,
.sub_tit, .company_tit, .tit, .txt {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* 본문 가독성: 줄간격을 조금 넓히고 자간을 미세하게 좁힙니다.
한글은 자간을 아주 살짝 조이면 덩어리감이 좋아집니다. */
p, li, dd, .txt {
line-height: 1.75;
letter-spacing: -.01em;
}
/* 제목은 반대로 줄간격을 조이고 자간을 더 좁혀 단단하게 */
h1, h2, h3, h4, h5, .sub_tit, .company_tit {
letter-spacing: -.02em;
}
/* bold(700) 는 한글에서 다소 둔탁합니다. 600 이 더 정제되어 보입니다. */
.sub_tit, .company_tit {
font-weight: 600;
}
/* -----------------------------------------------------------------------------
* 2. 섹션 제목
* -----------------------------------------------------------------------------
* .sub_tit 는 padding-bottom:75px 로 아래 여백이 큽니다. 그 자체는 두되,
* 제목 아래에 짧은 브랜드 컬러 룰을 넣어 시선을 잡아줍니다.
* -------------------------------------------------------------------------- */
.sub_tit {
position: relative;
}
.sub_tit::after {
content: "";
position: absolute;
left: 50%;
bottom: 42px;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: var(--z-blue, #152444);
opacity: .85;
}
/* -----------------------------------------------------------------------------
* 3. 면(surface) — 박스와 카드
* -----------------------------------------------------------------------------
* 지금은 #f5f5f5 배경에 모서리도 그림자도 없는 완전한 플랫입니다.
* 아주 옅은 테두리 + 모서리 + 낮은 그림자를 주면 '떠 있는' 느낌 없이
* 정돈되어 보입니다.
* -------------------------------------------------------------------------- */
.gray_box,
.aircraft_in,
.notice_center,
.search_box {
background: var(--rf-surface);
border: 1px solid var(--rf-line-soft);
border-radius: var(--border-round, 8px);
}
/* 콘텐츠 이미지 모서리 — 항공기 사진 등 */
.aircraft_img img,
.carousel-inner img,
.gallery_list img {
border-radius: var(--border-round, 8px);
}
/* -----------------------------------------------------------------------------
* 4. 버튼
* -----------------------------------------------------------------------------
* 색은 그대로 둡니다. 모서리 / 자간 / 전환만 정리합니다.
* .btn-submit 은 text-transform:uppercase 인데, 대문자는 자간을 벌려야
* 의도한 것처럼 보입니다.
* -------------------------------------------------------------------------- */
.btn,
.btn-submit,
.btn-cancel,
.btn_dark,
.btn_darkgray,
.notice_btn,
.inquiry_btn {
border-radius: var(--input-round, 5px);
transition: background-color .25s var(--rf-ease),
border-color .25s var(--rf-ease),
color .25s var(--rf-ease),
box-shadow .25s var(--rf-ease),
transform .25s var(--rf-ease);
}
.btn-submit {
letter-spacing: .06em; /* 대문자 버튼의 숨통 */
}
/* 눌리는 느낌: 살짝 떠올랐다가 클릭 시 내려앉습니다. 과하지 않게 1px. */
.btn-submit:hover,
.btn-cancel:hover,
.btn_dark:hover,
.btn_darkgray:hover {
transform: translateY(-1px);
box-shadow: var(--rf-shadow);
}
.btn-submit:active,
.btn-cancel:active,
.btn_dark:active,
.btn_darkgray:active {
transform: translateY(0);
box-shadow: none;
}
/* 메인 페이지 계열 버튼 — 서브페이지와 클래스 체계가 다릅니다.
색과 크기는 그대로 두고 모서리 / 전환 / 눌림만 통일합니다. */
.btn_prime,
.btn_dgray,
.btn_whiteb,
.inquiry_btn,
.btn_login,
.btn_gojoin {
border-radius: var(--input-round, 5px);
transition: background-color .25s var(--rf-ease),
border-color .25s var(--rf-ease),
color .25s var(--rf-ease),
box-shadow .25s var(--rf-ease),
transform .25s var(--rf-ease);
}
.btn_prime:hover,
.inquiry_btn:hover {
transform: translateY(-1px);
box-shadow: var(--rf-shadow);
}
.btn_prime:active,
.inquiry_btn:active {
transform: translateY(0);
box-shadow: none;
}
/* -----------------------------------------------------------------------------
* 4-2. 메인 비주얼 카피
* -----------------------------------------------------------------------------
* 기존: text-shadow: 1px 1px 1px rgba(0,0,0,1)
* 1px 짜리 딱딱한 검은 그림자는 사진 위 글자를 오래된 느낌으로 만듭니다.
* 넓고 옅게 퍼지는 그림자로 바꾸면 글자는 더 잘 읽히면서 훨씬 정제되어 보입니다.
* -------------------------------------------------------------------------- */
.mvisual_txt {
text-shadow: 0 1px 2px rgba(0, 0, 0, .28),
0 8px 32px rgba(0, 0, 0, .35);
letter-spacing: -.02em;
}
/* -----------------------------------------------------------------------------
* 5. 표
* -----------------------------------------------------------------------------
* 게시판 목록과 제원표. 굵은 구분선 대신 헤어라인으로 바꾸고 행 높이를 키웁니다.
* -------------------------------------------------------------------------- */
/* 셀 padding 은 건드리지 않습니다. .rwd-table td 가 이미 20px 15px 이고
반응형 분기에서 다시 지정하고 있어서, 여기서 덮으면 오히려 좁아집니다. */
.rwd-table td,
.rwd-table th,
.dark_tbl td,
.dark_tbl th,
.notice-table td,
.notice-table th {
border-color: var(--rf-line);
}
.rwd-table tbody tr,
.dark_tbl tbody tr,
.notice-table tbody tr {
transition: background-color .2s var(--rf-ease);
}
.rwd-table tbody tr:hover,
.dark_tbl tbody tr:hover,
.notice-table tbody tr:hover {
background: var(--rf-line-soft);
}
/* 항공기 제원 목록(dl) — 라벨과 값의 대비를 살립니다 */
.list_dot03 dt {
color: #6b7688;
font-weight: 400;
letter-spacing: -.01em;
}
.list_dot03 dd {
color: var(--txt-color, #222);
font-weight: 500;
}
/* -----------------------------------------------------------------------------
* 6. 링크와 포커스
* -----------------------------------------------------------------------------
* 키보드 사용자를 위한 포커스 링. 마우스 클릭 시에는 나타나지 않습니다.
* -------------------------------------------------------------------------- */
a {
transition: color .2s var(--rf-ease), opacity .2s var(--rf-ease);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--z-blue, #152444);
outline-offset: 2px;
border-radius: 2px;
}
/* -----------------------------------------------------------------------------
* 7. 입력 요소
* -------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"],
select, textarea {
border-radius: var(--input-round, 5px);
transition: border-color .2s var(--rf-ease), box-shadow .2s var(--rf-ease);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus,
select:focus, textarea:focus {
border-color: var(--z-secondary, #4b5e85);
box-shadow: 0 0 0 3px rgba(75, 94, 133, .12);
}
/* -----------------------------------------------------------------------------
* 8. 게시글 본문 (공지사항 등)
* -----------------------------------------------------------------------------
* 실제 컨테이너는 .view_section 입니다(notice-view.blade.php).
* 본문은 nl2br() 을 거쳐 와
로만 이루어져 있어 문단 구분이 약합니다.
* 소제목( 한 줄짜리 ) 위아래 여백을 주어 절이 눈에 들어오게 합니다.
* -------------------------------------------------------------------------- */
.view_section {
line-height: 1.8;
}
.view_section p {
margin-bottom: 1.6rem;
}
.view_section p > strong:only-child {
display: inline-block;
margin-top: 1.6rem;
font-size: 1.1em;
font-weight: 600;
letter-spacing: -.015em;
color: var(--th-txt-color, #0a1e3c);
}
/* -----------------------------------------------------------------------------
* 9. 푸터
* -----------------------------------------------------------------------------
* 상단 경계를 헤어라인으로 정리합니다.
* -------------------------------------------------------------------------- */
#footer .ft_top {
border-bottom: 1px solid var(--rf-line-soft);
}
/* -----------------------------------------------------------------------------
* 10. 접근성 — 모션 최소화 설정 존중
* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}