@charset "utf-8";

/* ============================================
 * theme.css — 색상 토큰 + 공용 폰트
 * medicine_jnu / anatomy / english 세 사이트가 공유
 * ============================================ */

/* 기본 — Pretendard */
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: url(/assets/fonts/Pretendard/Pretendard-Thin.woff2) format('woff2')
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: url(/assets/fonts/Pretendard/Pretendard-ExtraLight.woff2) format('woff2')
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: url(/assets/fonts/Pretendard/Pretendard-Light.woff2) format('woff2')
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/Pretendard/Pretendard-Regular.woff2) format('woff2')
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/Pretendard/Pretendard-Medium.woff2) format('woff2')
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/Pretendard/Pretendard-SemiBold.woff2) format('woff2')
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/Pretendard/Pretendard-Bold.woff2) format('woff2')
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: url(/assets/fonts/Pretendard/Pretendard-ExtraBold.woff2) format('woff2')
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: url(/assets/fonts/Pretendard/Pretendard-Black.woff2) format('woff2')
}

/* 강조 — Libre Caslon Text (서버에 아직 없음, 대장님이 직접 업로드 예정) */
@font-face {
    font-family: 'Libre Caslon Text';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/Libre_Caslon/LibreCaslonText-Regular.ttf) format('truetype')
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: italic;
    font-weight: 400;
    src: url(/assets/fonts/Libre_Caslon/LibreCaslonText-Italic.ttf) format('truetype')
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: normal;
    font-weight: 700;
    src: url(/assets/fonts/Libre_Caslon/LibreCaslonText-Bold.ttf) format('truetype')
}

/* 숫자 — Roboto */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url(/assets/fonts/roboto/Roboto-Thin.woff2) format('woff2'), url(/assets/fonts/roboto/Roboto-Thin.woff) format('woff')
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(/assets/fonts/roboto/Roboto-Light.woff2) format('woff2'), url(/assets/fonts/roboto/Roboto-Light.woff) format('woff')
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/roboto/Roboto-Regular.woff2) format('woff2'), url(/assets/fonts/roboto/Roboto-Regular.woff) format('woff')
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url(/assets/fonts/roboto/Roboto-Medium.woff2) format('woff2'), url(/assets/fonts/roboto/Roboto-Medium.woff) format('woff')
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url(/assets/fonts/roboto/Roboto-Bold.woff2) format('woff2'), url(/assets/fonts/roboto/Roboto-Bold.woff) format('woff')
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap');
body { font-family: 'Noto Serif KR', serif; }

/* ============================================
 * Reset — 사이트마다 다를 이유가 없는 순수 브라우저 기본값 제거만.
 * 실제 디자인 값(색상/패딩/보더 등)이 들어가는 폼/버튼/뱃지 같은 컴포넌트는
 * 여기 두지 않는다 — 그건 각 사이트 basic.css(폼/인풋/버튼/뱃지 전담) 몫이다.
 * ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* display:flex/grid 등을 지정한 요소에 hidden 속성 줘도 항상 먹히도록 — author 스타일이
   UA 기본 [hidden]{display:none}보다 우선순위가 높아서 강제 안 하면 무시됨(자주 겪는 함정) */
[hidden] {
    display: none !important;
}

/* ============================================
 * Scrollbar — 전역 공통(모든 사이트)
 * ============================================ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray300) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* 뷰포트(문서) 스크롤바는 크롬이 *::-webkit-scrollbar-*를 안 잡아줄 때가 있어
 * html에 명시적으로 한 번 더 지정 */
html::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html::-webkit-scrollbar-track {
    background: transparent;
    border: none;
    box-shadow: none;
}

html::-webkit-scrollbar-thumb {
    background: var(--color-gray300);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: var(--color-gray300);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: none;
}

html, body {
    height: 100%;
}

body {
    margin: 0 auto;
    background: var(--color-white);
    word-wrap: break-word;
    word-break: keep-all;
    border: none;
    font-family: var(--font-base);
    color: var(--color-text-body);
    font-weight: var(--font-weight-regular);
}

input, select, textarea, button {
    border: none;
    vertical-align: middle;
}

textarea {
    width: 100%;
    min-height: 143px;
    padding: 15px;
    background: var(--color-white);
    border: 1px solid var(--color-gray500);
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 27px;
    color: var(--color-text-body);
    resize: vertical;
    vertical-align: top;
}

textarea:hover {
    border-color: var(--color-gray700);
}

textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

textarea::placeholder {
    color: var(--color-text-muted);
}

button {
    outline: 0;
    cursor: pointer;
    color: inherit;
    background: none;
}

input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}

label {
    cursor: pointer;
}

ol, ul, ul li {
    list-style: none;
}

img {
    border: none;
    vertical-align: top;
}

hr {
    display: none;
    border: 0 none;
}

table {
    width: 100%;
    border-collapse: collapse;
}

caption, legend {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
}

address, cite, code, em {
    font-style: normal;
    font-weight: normal;
}

a {
    color: var(--color-black);
    text-decoration: none;
}

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

a[href^=tel] {
    text-decoration: inherit;
    color: inherit;
}

@media screen and (min-width:280px) and (max-width:319px) {
    html { font-size: 55.5%; }
}

:root {
    /* font ========================================================================  */
    /* font-family */
    --font-base: 'Pretendard', sans-serif;
    --font-accent: 'Libre Caslon Text', serif;
    --font-number: 'Roboto', sans-serif;

    /* font-size — px 단위 */
    --font-size-display-lg: 78px;   /* 히어로 메인 타이틀 */
    
    --font-size-heading-xl: 42px;   /* 섹션 타이틀 (Caslon) */
    --font-size-heading-banner: 38px; /* 서브페이지 배너 타이틀 */
    --font-size-heading-lg: 28px;   /* 카드/소식 타이틀(large) */
    --font-size-heading-sm: 24px;   /* GNB 확장메뉴 사이드 브랜드명 */
    --font-size-heading-md: 22px;   /* 카드/소식 타이틀(medium) */

    --font-size-body-lg: 30px;      /* 히어로 서브 타이틀 */
    --font-size-body-md: 18px;      /* 카드/소식 본문 */
    --font-size-body-sm: 14px;      /* 카드/소식 본문 */

    --font-size-label-lg: 20px;     /* GNB 1depth 메뉴명 (원래 날짜/뱃지용으로 만든 값, 현재는 GNB에서 사용) */
    --font-size-label-md: 18px;     /* 날짜/뱃지(medium) */
    --font-size-label-sm: 15px;     /* 날짜/뱃지(small) */
    --font-size-label-xs: 14px;     /* 게시판 태그/각주 등 가장 작은 라벨 */

    --font-size-caption: 16px;      /* footer 연락처/policy/copyright 등 보조 텍스트 */


    /* line-height — 단위 없는 배수(= font-size × 배수 = 실제 줄간격 px) */
    --line-height-display-lg: 1.5;   /* 70px(display-lg) × 1.5 = 105px */
    --line-height-heading-xl: 1.23;  /* 42px(heading-xl) × 1.23 = 51.66px ≈ 51.7px */
    --line-height-heading-banner: 1.36; /* 38px(heading-banner) × 1.36 = 51.68px ≈ 51.7px */
    --line-height-heading-lg: 1.5;   /* 28px(heading-lg) × 1.5 = 42px */
    --line-height-heading-sm: 1.25;  /* 24px(heading-sm) × 1.25 = 30px */
    --line-height-heading-md: 1.5;   /* 22px(heading-md) × 1.5 = 33px */
    --line-height-body-lg: 1.5;      /* 30px(body-lg) × 1.5 = 45px */
    --line-height-body-md: 1.5;      /* 18px(body-md) × 1.5 = 27px */
    --line-height-caption: 2.25;     /* 16px(caption) × 2.25 = 36px */
    --line-height-label-lg: 1.5;     /* 20px(label-lg) × 1.5 = 30px */
    --line-height-label-md: 1.19;    /* 18px(label-md) × 1.19 = 21.42px ≈ 21.5px */
    --line-height-label-sm: 1.5;     /* 15px(label-sm) × 1.5 = 22.5px */

    /* font-weight */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* breakpoints — @media (max-width: ...) 조건 안에는 var() 못 씀(CSS 자체 제약,
     * 빌드 툴 없는 이 프로젝트에선 우회 불가) — min-width/max-width 같은 일반 속성값에만 사용 */
    --breakpoint-desktop: 1520px;
    --breakpoint-tablet-lg: 1024px;
    --breakpoint-tablet: 768px;
    --breakpoint-mobile: 600px;

    /* layout — 컨테이너 너비 / 좌우 여백 (.wrap 유틸 클래스와 함께 씀) */
    --container-max-width: var(--breakpoint-desktop); /* footer 등 콘텐츠 영역 최대 너비 — desktop 브레이크포인트와 값이 같아서 토큰 재사용(중복 정의 방지) */
    --page-padding: 0; /* 데스크탑 기본값 — 아래 반응형에서 브레이크포인트별로 좁아짐 */

    /* color ========================================================================  */

    /* color - gray */
    --color-white: #FFFFFF;
    --color-white-rgb: 255, 255, 255; /* rgba(var(--color-white-rgb), 0.2)처럼 투명도 줄 때 사용 */
    --color-black: #000000;
    --color-gray50: #F8F8F8;
    --color-gray100: #F0F0F0;
    --color-gray200: #E4E4E4;
    --color-gray300: #D8D8D8;
    --color-gray400: #C6C6C6;
    --color-gray500: #BEBEBE;
    --color-gray600: #999999;
    --color-gray700: #555555;
    --color-gray800: #2D2D2D;

    /* color - primitive (버튼 등 상태별 컬러 — default/hover/pressed)
     * 버튼 색상 사용 규칙 — .btn--default/secondary/tertiary와 매칭
     * - primary(default) : 등록/수정/저장 등 확정·긍정 액션
     * - secondary         : 삭제 등 위험·부정 액션
     * - tertiary          : 취소/목록 등 그 외 보조 액션
     */
    --color-primary: #1F594D;
    --color-primary-hover: #287363;
    --color-primary-pressed: #103A31;

    --color-secondary: #701E20;
    --color-secondary-hover: #AD3E41;
    --color-secondary-pressed: #5C0D0F;

    --color-tertiary: var(--color-white);
    --color-tertiary-hover: var(--color-gray100);
    --color-tertiary-pressed: var(--color-primary);

    /* color - quick service (메인 Quick Service 버튼 전용) */
    --color-quick-service: #7B2C2E;
    --color-quick-service-hover: #AD3E41;

    /* color - background */
    --color-bg-base: #ffffff;
    --color-bg-secondary: #EBE8E1;
    --color-bg-footer: #151E31;
    --color-bg-footer-hover: #1F2F50;
    --color-bg-symbol: #EDF1F7;
    --color-bg-symbol-rgb: 237, 241, 247; /* rgba(var(--color-bg-symbol-rgb), 0.29)처럼 투명도 줄 때 사용 */

    /* color - form */
    --color-bg-form-label: #F3F3F3;   /* 정보입력표 라벨 셀 배경 */

    /* color - table */
    --color-bg-table-header: var(--color-gray100);
    --color-bg-table-header-strong: var(--color-primary);
    --color-bg-board-calendar-header: var(--color-gray100);
    --color-bg-board-calendar-cell-empty: var(--color-white);
    --color-bg-board-calendar-cell-today: #FFFBEA;
    --color-bg-board-list-row: var(--color-white);
    --color-bg-board-photo-thumb: #E6E6E6;
    --color-bg-pagination: var(--color-white);
    --color-bg-pagination-active: var(--color-primary);
    --color-text-board-calendar-date: var(--color-gray600);
    --color-text-board-calendar-event: var(--color-text-title1);
    --color-text-board-calendar-header: var(--color-text-table-header);
    --color-text-board-calendar-sunday: #BC0408;
    --color-text-board-calendar-saturday: #0E72C3;
    --color-text-board-calendar-nav: var(--color-text-title1);
    --color-text-board-list: var(--color-text-title1);
    --color-text-board-list-hover: var(--color-primary);
    --color-text-pagination: var(--color-text-title1);
    --color-text-pagination-active: var(--color-white);

    /* color - text */
    --color-text-title1: #000000;
    --color-text-title2: #0D4238;
    --color-text-body: #555555;
    --color-text-inverse: #ffffff;
    --color-text-muted: #8E8C87;
    --color-text-footer: var(--color-gray500);
    --color-text-footer-accent: #9AC2EF;
    --color-text-footer-inverse: #DFDFDF;
    --color-text-table-header: var(--color-text-title1);
    --color-text-table-header-strong: var(--color-white);
    --color-text-notice: #1979D2;
    --color-text-link: #596ba4;
    --color-danger: #FF0000;
    --color-form-required: #D32F2F;    /* 정보입력표 필수 항목(*) 표시색 */

    /* color - border */
    --color-border-base: #E9E9E9;
    --color-border-footer: #3B404B;
    --color-border-header: #D9D9D9;
    --color-border-table: var(--color-gray300);
    --color-border-pagination: var(--color-border-base);
    
    --color-border-board-header: var(--color-gray800);
    --color-border-board-calendar: var(--color-gray300);
    --color-border-board-calendar-nav: var(--color-border-base);
    --color-border-board-list: var(--color-gray300);
    --color-border-board-list-strong: var(--color-text-title1);

    /* color - badge */
    --color-badge-students: #7D2433;
    --color-badge-graduate: #1353AB;
    --color-badge-new-students: #006737;
    --color-badge-news: #9C0187;
    --color-badge-achievements: #B44F06;
    --color-badge-events: #6F00A2;
    --color-icon-download: #597D75;

    /* ============================================
     * 사이트 전용 색상 — 위는 전 사이트 공용, 아래부터는 특정 사이트에서만 쓰는 값.
     * 새 사이트 전용 색이 필요하면 공용 섹션에 섞지 말고 여기 사이트별 소제목 아래로 추가할 것
     * ============================================ */

    /* medicine_jnu 전용 — 게시판/테이블 카테고리 태그(교육과정표 교과구분 등) */
    --color-tag-major-required: #B71C1C;
    --color-tag-major-elective: #1565C0;
    --color-tag-liberal-required: #2E7D32;
    --color-tag-liberal-elective: #941988;

    /* anatomy / iacuc 공용 — 메인 퀵링크 카드 배경(default/hover/pressed)
     * hover는 밝아지고 pressed는 어두워지는 3단계 — 파생식으로는 실제 값이 안 맞아 디자인 실측값 고정 */
    --color-card-cream: #EBE8E1;
    --color-card-cream-hover: #F2EFE8;
    --color-card-cream-pressed: #D9D6CF;
    --color-card-blue-gray: #E1E3EB;
    --color-card-blue-gray-hover: #E8EAF2;
    --color-card-blue-gray-pressed: #CFD1D9;

    /* control height — 인풋/셀렉트박스/버튼 공용 3단계, 단독 지정 없으면 md가 기본값 */
    --control-h-md: 48px;
    --control-h-lg: 56px;
    --control-h-xl: 63px;

    /* "목록/돌아가기" 성격 버튼(.btn--list) 최소 폭 — 버튼 크기(medium/large/xlarge)별 3단계, 반응형에선 풀폭 */
    --btn-list-min-width-md: 180px;  /* 카드 "자세히보기/목록" */
    --btn-list-min-width-lg: 200px;  /* TODO: 확정 */
    --btn-list-min-width-xl: 220px;  /* TODO: 확정 */

    /* 게시판 리스트 footer 액션 버튼(.board-list-footer__action, 쓰기 등) 최소 폭 — 디자인상 162 */
    --btn-list-action-min-width: 162px;

}

/* assets — icon (로고 제외 — 실컬러 유지해야 해서 mask 대상 아님) */
.icon {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: var(--asset-icon-url) center / contain no-repeat;
    mask: var(--asset-icon-url) center / contain no-repeat;
}

.icon-symbol {
    --asset-icon-url: url("/assets/icons/symbol.svg");
}

.icon-pbl {
    --asset-icon-url: url("/assets/icons/pbl.svg");
}

.icon-pause {
    --asset-icon-url: url("/assets/icons/pause.svg");
}

.icon-play {
    --asset-icon-url: url("/assets/icons/play.svg");
}

.icon-quotation-mark {
    --asset-icon-url: url("/assets/icons/quotation-mark.svg");
}

.icon-arrow-left {
    --asset-icon-url: url("/assets/icons/arrow-left.svg");
}

.icon-arrow-right {
    --asset-icon-url: url("/assets/icons/arrow-right.svg");
}

.icon-arrow-up {
    --asset-icon-url: url("/assets/icons/arrow-up.svg");
}

.icon-attach-file {
    --asset-icon-url: url("/assets/icons/attach-file.svg");
}

.icon-clip {
    --asset-icon-url: url("/assets/icons/clip.svg");
}

.icon-left {
    --asset-icon-url: url("/assets/icons/left.svg");
}

.icon-right {
    --asset-icon-url: url("/assets/icons/right.svg");
}

.icon-double-left {
    --asset-icon-url: url("/assets/icons/double-left.svg");
}

.icon-double-right {
    --asset-icon-url: url("/assets/icons/double-right.svg");
}

.icon-class {
    --asset-icon-url: url("/assets/icons/class.svg");
}

.icon-dot {
    --asset-icon-url: url("/assets/icons/dot.svg");
}

.icon-exam-schedule {
    --asset-icon-url: url("/assets/icons/exam-schedule.svg");
}

.icon-exit {
    --asset-icon-url: url("/assets/icons/exit.svg");
}

.icon-up {
    --asset-icon-url: url("/assets/icons/up.svg");
}

.icon-down {
    --asset-icon-url: url("/assets/icons/down.svg");
}

.icon-download {
    --asset-icon-url: url("/assets/icons/download.svg");
}

.icon-file {
    --asset-icon-url: url("/assets/icons/file.svg");
}

.icon-hamburger {
    --asset-icon-url: url("/assets/icons/hamburger.svg");
}

.icon-home {
    --asset-icon-url: url("/assets/icons/home.svg");
}

.icon-menu-dropdown {
    --asset-icon-url: url("/assets/icons/menu-dropdown.svg");
}

.icon-plus {
    --asset-icon-url: url("/assets/icons/plus.svg");
}

.icon-menu-external-link {
    --asset-icon-url: url("/assets/icons/menu-external-link.svg");
}

.icon-menu-fold {
    --asset-icon-url: url("/assets/icons/menu-fold.svg");
}

.icon-minus {
    --asset-icon-url: url("/assets/icons/minus.svg");
}

.icon-print {
    --asset-icon-url: url("/assets/icons/print.svg");
}

.icon-scholarship {
    --asset-icon-url: url("/assets/icons/scholarship.svg");
}

.icon-search {
    --asset-icon-url: url("/assets/icons/search.svg");
}

.icon-share {
    --asset-icon-url: url("/assets/icons/share.svg");
}

.icon-study {
    --asset-icon-url: url("/assets/icons/study.svg");
}

.icon-view-more {
    --asset-icon-url: url("/assets/icons/view-more.svg");
}

.icon-bookmark {
    --asset-icon-url: url("/assets/icons/bookmark.svg");
}

.icon-viewtype-1 {
    --asset-icon-url: url("/assets/icons/viewtype-1.svg");
}

.icon-viewtype-2 {
    --asset-icon-url: url("/assets/icons/viewtype-2.svg");
}

.icon-viewtype-3 {
    --asset-icon-url: url("/assets/icons/viewtype-3.svg");
}

/* ============================================
 * fonts
 * 기본 - basic, 강조 - accent, 숫자 - num  
 * ============================================ */
.font-accent {
    font-family: var(--font-accent);
    font-weight: var(--font-weight-bold);
}
.font-num {
    font-family: var(--font-number);
}

/* ============================================
 * layoutheader-utility-wrap wrap
 * ============================================ */
.wrap {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}

@media (max-width:1520px) {
    :root {
        --page-padding: 40px;
    }
}

@media (max-width:1024px) {
    :root {
        --page-padding: 24px;
    }
}

@media (max-width:768px) {
    :root {
        --page-padding: 16px;
    }
}