/* 깨진 한글 복구 전용 스타일 */

/* 본명조 원본 (Source Han Serif Korean VF) — 옛한글 조합 셰이핑 완벽 지원.
   Adobe/Google이 배포하는 원본에는 GSUB(ljmo/vjmo/tjmo) 룰이 살아있어
   ᄒᆡ 같은 옛한글 시퀀스가 한 음절로 조합 렌더링된다.
   @import는 반드시 파일 최상단. */
@import url('https://webcdn.mediclassics.kr/fonts/SourceHanSerifK-VF/stylesheet.css');

/* 함초롬 폰트 (완성형 PUA 옛한글 렌더링 담당) */
@font-face {
    font-family: 'HCRBatang';
    src: local('함초롬바탕'), local('함초롬바탕 LVT'), local('HCR Batang LVT'), local('HCRBatang'),
         url('https://webcdn.mediclassics.kr/fonts/HCRBatang/HCRBatang.woff2') format('woff2'),
         url('https://webcdn.mediclassics.kr/fonts/HCRBatang/HCRBatang.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 옛한글 표시 폰트 스택 (입력/결과 textarea)
   본명조 원본을 최우선 — 옛한글 조합 셰이핑을 완전 지원.
   웹폰트 로드 실패 시 시스템 폰트로 폴백. */
.yethangul-font {
    font-family: 'SourceHanSerifK', 'Source Han Serif K', 'Source Han Serif KR',
                 -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic',
                 system-ui, serif;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* PUA 완성형 전용 폰트 스택: 함초롬만 사용, 없으면 tofu */
.hpua-font {
    font-family: 'HCRBatang', 'HCR Batang LVT', '함초롬바탕', serif !important;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* 텍스트 영역 크기 */
.input-textarea {
    width: 100%;
    min-height: 260px;
    padding: 16px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    resize: vertical;
    transition: border-color 0.2s;
}

/* 변환 결과 두 textarea는 입력 대비 20% 낮게 (260px → 208px) */
#output,
#outputHpua {
    min-height: 208px;
}

/* 왼쪽 입력 패널의 textarea가 오른쪽 결과 패널 높이(2개 textarea + 여백)에
   맞춰 자동으로 늘어나도록 flex 처리.
   main-grid는 기본 align-items: stretch이므로 두 패널의 총 높이는 이미 같아진다. */
.main-grid > .panel:first-child {
    display: flex;
    flex-direction: column;
}

.main-grid > .panel:first-child .textarea-wrapper {
    flex: 1;
    display: flex;
}

.main-grid > .panel:first-child .textarea-wrapper > textarea {
    flex: 1;
    height: auto;
}

.input-textarea:focus {
    outline: none;
    border-color: #a18cd1;
}

/* 변환 실행 버튼 — 상단 grid와 아래 사이 여백 */
.convert-section {
    margin-top: 20px;
}

/* 표준 조합형 서브라벨 (변환 결과 패널 상단, 라벨 왼쪽·복사·저장 오른쪽) */
.std-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.std-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
}

/* 비표준 PUA 참고 서브섹션 — 변환 결과 패널 안에 세로로 배치
   표준 조합형과의 사이 여백을 크게 두어 시각적으로 확실히 구분 */
.hpua-section {
    margin-top: 40px;
}

.hpua-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.hpua-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b6383;
}

/* PUA textarea 크기는 표준 조합형과 동일 (input-textarea 기본 min-height 260px 상속) */