@charset "utf-8";
/* ==========================================================================
해성한의원 카테고리 페이지 전용
- www/about/index.jsp (원장님 인삿말, #about_page)
- www/about/history/index.jsp (해성한의원 역사, #history_page) - 2026-09-15 신설
- www/about/master/index.jsp (신재용 스승님, #master_page) - 2026-09-15 신설
- 서브페이지 공통(.sub_page 히어로/타이포/reveal)은 /css/sub.css 가 담당한다.
이 파일은 sub.css 다음에 로드되어 이 페이지 전용 부분만 덮는다. (publish.md 3.4)
========================================================================== */
/* --------------------------------------------------------------------------
1. 히어로 - 이 페이지만 615px + 수묵 배경
-------------------------------------------------------------------------- */
#about_page .hero{height:615px; padding-top:208px;}
#about_page .hero_bg{position:absolute; inset:0; background:url('/img/about/about_hero.webp') no-repeat center 86% / cover; opacity:0; transform:scale(1.03); transition:opacity 1.6s ease, transform 2.4s cubic-bezier(.22,.61,.36,1);}
#about_page .hero.is_ready .hero_bg{opacity:.5; transform:none;}
/* --------------------------------------------------------------------------
2. 원장 인사
-------------------------------------------------------------------------- */
#about_page .greeting{padding:144px 0; background-color:#f3f2eb; border-top:1px solid var(--hs-line);
background-image:
radial-gradient(52% 78% at 12% 8%, rgba(62,122,108,.10) 0%, rgba(62,122,108,0) 62%),
radial-gradient(44% 66% at 88% 22%, rgba(47,110,180,.06) 0%, rgba(47,110,180,0) 60%),
radial-gradient(60% 80% at 55% 105%, rgba(157,193,181,.12) 0%, rgba(157,193,181,0) 58%);}
/* 디자인 그리드 0.80fr : 1.20fr (사진 419.2px / 텍스트 628.8px, gap 72px)
[변경 2026-09-11] 인사말이 다섯 문단 + 약력 다섯 줄로 길어져 글 열이 사진보다 두 배 가까이 높다.
가운데 정렬(center)이면 사진이 글 중간에 떠 버려 위로 붙인다(start).
[이전 - 사진을 sticky 로 붙여 글을 따라 내려오게 했으나, 원장님이 그 효과를 빼 달라 해서 제자리에 둔다.
되돌릴 때 .photo_frame 에 position:sticky; top:calc(var(--hs-header-h) + 40px); 를 다시 준다] */
/* [레이아웃 개편 2026-09-15] 왼쪽 열(사진 + 약력) : 오른쪽 열(인사말) = 0.78 : 1.22.
약력을 사진 아래로 내리면서 두 열 높이가 맞았고, 오른쪽 열은 폭을 넓혀(560 → 640px) 글줄이 덜 접히게 했다.
[이전 값] grid 0.8fr/1.2fr, gap 72px, lead 23px, msg 17px/34px, sign 15px·strong 22px */
#about_page .greeting .inner{display:grid; grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr); gap:clamp(56px, 6vw, 96px); align-items:start;}
/* 사진 프레임 (원장 사진 doctor.png 744x788) */
#about_page .photo_frame{position:relative; aspect-ratio:419.2 / 502.634; overflow:hidden; border:1px solid var(--hs-line); box-sizing:border-box; background:#f2f6f4;}
/* 프레임이 사진보다 세로로 길어(0.834 : 0.944) 좌우가 잘린다. 인물이 중앙보다 조금 위에 있어 위쪽을 남긴다. */
#about_page .photo_frame img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 20%;}
/* 제목 - 인사말이 이 섹션의 전부라 조금 더 크게 */
#about_page .greeting_text .sec_head h2{font-size:clamp(36px, 3.2vw, 48px); line-height:1.3;}
/* 여는 말(원고 첫 두 문장) - 본문보다 크게, 세리프로. 제목과 본문 사이를 잇는 한 호흡 */
#about_page .greeting_text .lead{margin-top:32px; max-width:640px; font-family:var(--hs-serif); font-size:clamp(22px, 1.75vw, 27px); font-weight:500; line-height:1.72; letter-spacing:-0.4px; color:var(--hs-title); word-break:keep-all;}
/* 글자가 커지면서 원고의
자리에서 끊으면 "갖고 / 있습니다." 처럼 한 단어가 홀로 남는다 - 폭에 맞춰 흐르게 둔다(2026-09-15) */
#about_page .greeting_text .lead br{display:none;}
/* 본문 - 위 여는 말과 가는 선 하나로 층을 나눈다 */
#about_page .greeting_text .msg{margin-top:34px; padding-top:34px; max-width:640px; border-top:1px solid var(--hs-line); font-size:19px; line-height:1.95; letter-spacing:-0.2px; color:var(--hs-body); word-break:keep-all;}
#about_page .greeting_text .msg p + p{margin-top:24px;}
/* 서명 - 이름은 세리프로 한 톤 세우고, 앞에 짧은 선을 그어 글의 끝을 표시한다.
[정리 2026-09-29] 날짜(2026.10.01)가 이름과 같은 줄에 붙어 "왕충조 2026.10.01" 이 한 덩어리로 읽혔다.
편지 맺음처럼 날짜를 윗줄로 올리고, 덩어리 전체를 본문 오른쪽 끝(본문 max-width 640px 에 맞춘다)에 붙인다.
짧은 선은 .sign 이 아니라 이름 줄(.sign_name)이 갖는다 - 세로로 쌓은 뒤에도 선이 이름 옆에 남아야 한다.
[이전 값] .sign{display:flex; align-items:center; gap:16px;} + .sign:before 로 선 */
#about_page .greeting_text .sign{display:flex; flex-direction:column; align-items:flex-end; gap:12px; margin-top:44px; max-width:640px; font-size:16px; color:var(--hs-muted);}
#about_page .greeting_text .sign .sign_date{font-family:var(--hs-sans); font-size:15px; letter-spacing:0.4px; color:var(--hs-muted);}
#about_page .greeting_text .sign .sign_name{display:flex; align-items:center; gap:16px;}
#about_page .greeting_text .sign .sign_name:before{content:''; width:32px; height:1px; background:var(--hs-hairline);}
#about_page .greeting_text .sign strong{font-family:var(--hs-serif); font-size:26px; font-weight:600; letter-spacing:-0.2px; color:var(--hs-title);}
/* 약력 - 사진 아래에 붙는다(2026-09-15). 사진과 선 하나로 나눈다 */
#about_page .career_box{margin-top:36px; padding-top:30px; border-top:1px solid var(--hs-line);}
#about_page .career_tit{font-family:var(--hs-serif); font-size:21px; font-weight:600; line-height:1.3; letter-spacing:-0.2px; color:var(--hs-title);}
/* 이력·자격 - 원장 소개에서 신뢰를 만드는 핵심 문장이라 흐린 회색 목록이 아니라
글자 크기·색으로 세워 보여준다(배경 블록·좌측 선 없이 본문과 같은 바탕 위에 둔다). */
#about_page .career{margin-top:20px;}
#about_page .career li{position:relative; padding-left:20px; font-family:var(--hs-sans); font-size:17px; font-weight:500; line-height:1.6; letter-spacing:-0.2px; color:var(--hs-title); word-break:keep-all;}
/* 마름모 불릿 - 한지 톤에 맞춰 원형 대신 각을 세운다 */
#about_page .career li:before{content:''; position:absolute; left:1px; top:11px; width:7px; height:7px; background:var(--hs-accent); transform:rotate(45deg);}
#about_page .career li + li{margin-top:12px;}
/* 괄호 안 부연(연도·경위)은 본문 색으로 한 톤 낮추고 줄을 바꿔 항목 이름이 먼저 읽히게 한다 */
#about_page .career .note{display:block; margin-top:2px; font-size:15px; font-weight:400; color:var(--hs-body);}
/* --------------------------------------------------------------------------
3. 진료 철학 - 세 가지 원칙
-------------------------------------------------------------------------- */
/* [2026-09-15] 위 인사 섹션과 같은 크기 체계로 - 제목 한 단계, 항목 제목·설명 한 단계씩.
두 열을 세로 가운데로 맞춰(align-items:center) 사진이 글 옆에 떠 있지 않게 한다.
[이전 값] strong 26px / span 18px / num 14px, align-items:flex-start */
#about_page .philosophy{padding:144px 0; background:var(--hs-paper);}
#about_page .philosophy .inner{display:flex; justify-content:center; gap:clamp(56px, 6vw, 96px); align-items:center;}
#about_page .principle_col{flex:0 1 560px; min-width:0;}
#about_page .principle_col .sec_head h2{font-size:clamp(36px, 3.2vw, 48px); line-height:1.3;}
#about_page .principle_list{margin-top:40px;}
#about_page .principle_list li{display:flex; gap:24px; padding-bottom:32px; border-bottom:1px solid var(--hs-line);}
#about_page .principle_list li + li{margin-top:32px;}
/* IBM Plex Mono(디자인) 미로드 - 시스템 모노 스택으로 대체 */
#about_page .principle_list .num{flex:none; padding-top:10px; font-family:'IBM Plex Mono','Consolas','Courier New',monospace; font-size:15px; line-height:1; color:var(--hs-accent);}
#about_page .principle_list .txt{min-width:0;}
#about_page .principle_list .txt strong{display:block; font-family:var(--hs-serif); font-size:28px; font-weight:600; line-height:1.4; letter-spacing:-0.4px; color:var(--hs-title);}
#about_page .principle_list .txt span{display:block; margin-top:10px; font-size:19px; line-height:1.85; color:var(--hs-body); word-break:keep-all;}
/* 우측 이미지 패널 (진료 장면 doctor_sub.png 863x1150) */
#about_page .philosophy_panel{position:relative; flex:0 1 530px; aspect-ratio:530.547 / 583.39; overflow:hidden; border:1px solid var(--hs-line); box-sizing:border-box; background:#f2f6f4;}
/* 사진이 패널보다 세로로 길어 위아래가 잘린다. 위쪽 수납장보다 진료 장면이 남도록 아래쪽으로 맞춘다. */
#about_page .philosophy_panel img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 72%;}
/* ==========================================================================
해성한의원 역사 (www/about/history/index.jsp) - 2026-09-15 신설, 2026-09-21 개편
- 히어로는 sub.css 공통(422px 그라데이션)을 그대로 쓴다.
- [개편 2026-09-21] 가운데 세로선 + 둥근 카드 연대표(timeline_*)를 걷어내고 원장 인사 페이지와 같은
말씨(직각 사진 프레임 · 명조 제목 · 가는 선)로 맞췄다. 사진은 4:3 - 원본이 거의 정사각형(934x874 …)이라
16:9 로 자르면 인물의 머리가 잘렸다.
- [개편 2026-09-21 두 번째 - 연혁 형식] 한 줄 = 시점 | 세로 축 | 본문(글 + 사진).
· 시점은 왼쪽 열에 가는 명조(300)로 크게. 숫자가 곧 이 페이지의 주인공이라 굵기 대신 크기로 세운다.
스크롤을 따라 잠시 머문다(sticky) - 본문이 길어도 어느 시점을 읽고 있는지 남는다.
· 세로 축은 목록 전체를 한 줄로 잇고(.hs_list:before) 줄마다 마름모 하나를 찍는다(.hs_axis) -
사이트의 마름모 불릿(원장 약력)과 같은 모양. 축은 아래로 갈수록 옅어져 "지금"으로 이어진다.
· 색은 첫 화면 연도(.hc_num)와 같은 브랜드 녹색(--hs-brand).
[2026-09-21] 히어로 전용 동양화 수채 배경(/img/history_bg.png) 적용.
========================================================================== */
/* [2026-09-30] 신재용 스승님 히어로도 역사와 같은 배경을 쓴다 */
#history_page .hero,
#master_page .hero{
background-image:
linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.52) 44%, rgba(255,255,255,.15) 75%),
url('/img/history_bg.png');
background-repeat:no-repeat, no-repeat;
background-position:center center, center center;
background-size:cover, cover;
}
#history_page .history{padding:120px 0 160px; background:var(--hs-paper);}
/* 세 열의 폭 - 시점 / 축 / 본문. 반응형에서 이 변수만 고친다 */
#history_page .hs_list{--hs-when-w:232px; --hs-axis-w:72px; position:relative; list-style:none; margin:0; padding:0;}
/* 세로 축 - 첫 줄 마름모부터 마지막 줄 아래까지. 끝은 서서히 사라진다 */
#history_page .hs_list:before{content:''; position:absolute; top:.6em; bottom:0; left:calc(var(--hs-when-w) + var(--hs-axis-w) / 2); width:1px;
background:linear-gradient(180deg, var(--hs-hairline) 0%, var(--hs-hairline) 82%, rgba(185,198,192,0) 100%);}
#history_page .hs_row{position:relative; display:grid; grid-template-columns:var(--hs-when-w) var(--hs-axis-w) minmax(0,1fr); align-items:start;}
#history_page .hs_row + .hs_row{margin-top:clamp(80px, 9vw, 128px);}
/* 시점 - 가는 명조로 크게. 첫 줄 높이(line-height)를 제목과 맞춰 마름모·제목 첫 줄이 한 선에 놓인다 */
#history_page .hs_when{position:sticky; top:calc(var(--hs-header-h) + 40px); display:block; padding-right:16px; font-family:var(--hs-serif); font-size:clamp(40px, 3.6vw, 52px); font-weight:300; line-height:1.15; letter-spacing:-1px; color:var(--hs-brand); white-space:nowrap;}
/* 숫자가 아닌 시점("한의대생 시절" / "현재") - 숫자 크기로 두면 열을 넘친다. 한 단 작게, 두 줄이면 두 줄로 */
#history_page .hs_when.is_text{font-size:clamp(26px, 2.2vw, 32px); font-weight:400; line-height:1.3; letter-spacing:-0.4px; padding-top:.35em; white-space:normal; word-break:keep-all;}
/* 축 위의 마름모 - 줄의 첫 줄 높이에 맞춘다 */
#history_page .hs_axis{position:relative; display:block; height:1.15em; font-size:clamp(40px, 3.6vw, 52px);}
#history_page .hs_axis:before{content:''; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-5px 0 0 -5px; background:var(--hs-brand); transform:rotate(45deg); box-shadow:0 0 0 6px var(--hs-paper);}
/* 본문 = 글 : 사진 = 1 : 0.86. 위쪽을 맞춰 제목 첫 줄과 사진 윗선이 같은 높이에 선다 */
#history_page .hs_body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.86fr); gap:clamp(40px, 5vw, 80px); align-items:start;}
#history_page .hs_text{min-width:0; max-width:520px;}
#history_page .hs_title{font-family:var(--hs-serif); font-size:clamp(26px, 2.4vw, 34px); font-weight:600; line-height:1.4; letter-spacing:-0.5px; color:var(--hs-title); word-break:keep-all;}
#history_page .hs_desc{margin-top:22px; font-size:17px; line-height:1.95; letter-spacing:-0.2px; color:var(--hs-body); word-break:keep-all;}
/* 사진 프레임 - 원장 인사 페이지의 .photo_frame 과 같은 규칙(직각·가는 테두리) */
#history_page .hs_photo{position:relative; aspect-ratio:4 / 3; overflow:hidden; border:1px solid var(--hs-line); box-sizing:border-box; background:#f2f6f4;}
/* 원본이 프레임보다 세로로 길다. 인물이 중앙보다 위에 있어 위쪽을 남긴다 */
#history_page .hs_photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 28%; transition:transform 1.2s cubic-bezier(.22,.61,.36,1);}
#history_page .hs_row:hover .hs_photo img{transform:scale(1.03);}
/* [추가 2026-09-29] 사진이 없는 줄(historyList 의 네 번째 값이 "") - 글이 칸 하나를 다 쓴다.
두 칸 격자를 그대로 두면 오른쪽이 통째로 비어 그 줄만 글이 중간에서 끊긴 것처럼 보인다.
지금은 "2021. 07"(스승님 안식년)이 유일한 그런 줄이다 - 사진을 받아 채우면 이 규칙은 저절로 쓰이지 않는다. */
#history_page .hs_row.no_photo .hs_body{display:block;}
#history_page .hs_row.no_photo .hs_text{max-width:760px;}
/* ==========================================================================
신재용 스승님 (www/about/master/index.jsp) - 2026-09-15 신설
- 사진 + 소개 / 스승이 써 준 글. 원장 인사 페이지(.greeting)와 같은 말씨로 맞춘다.
========================================================================== */
/* [2026-09-16] 본문을 비워 둔 동안의 여백. 원고가 들어와 아래 섹션 주석을 풀면 index.jsp 에서 이 섹션을 지운다 */
#master_page .ms_blank{height:clamp(200px, 32vh, 360px); background:var(--hs-paper);}
#master_page .master{padding:144px 0; background-color:#f3f2eb; border-top:1px solid var(--hs-line);}
#master_page .master .inner{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center;}
/* 두 분이 원본의 왼쪽에 몰려 있어 정사각형으로 자를 때 왼쪽을 잡는다(메인 .pp_photo 와 같은 값) */
#master_page .ms_photo{position:relative; aspect-ratio:1/1; overflow:hidden; border:1px solid var(--hs-line); box-sizing:border-box; background:#f2f6f4;}
#master_page .ms_photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:6% center; transform:scale(1.2); transform-origin:32% 78%;}
/* 스승님 소개 제목 - 공통 .sec_head h2(40px)보다 2px 작게(2026-09-30). 반응형도 공통값에서 2px씩 뺀다 */
#master_page .ms_text .sec_head h2{font-size:38px;}
/* 모바일(900px 이하)에서만 "한의학의 큰 어른 / 신재용 스승님" 으로 끊는 줄바꿈 */
#master_page .ms_text .sec_head h2 .mo_br{display:none;}
#master_page .ms_text .lead{margin-top:30px; max-width:560px; font-family:var(--hs-serif); font-size:23px; font-weight:500; line-height:1.7; letter-spacing:-0.3px; color:var(--hs-title); word-break:keep-all;}
#master_page .ms_text .msg{margin-top:28px; max-width:560px; font-size:17px; line-height:34px; color:var(--hs-body); word-break:keep-all;}
#master_page .ms_text .msg p + p{margin-top:20px;}
#master_page .letter{padding:144px 0; background:var(--hs-paper);}
/* [크기 조정 2026-10-01] 추천서 글씨가 잘 안 보인다는 의견 - 추천서 칸을 넓히고 글 칸을 그만큼 좁혔다.
[이전 값] grid-template-columns:minmax(0,1fr) minmax(0,1fr) */
/* [크기 조정 2026-10-02] 추천서를 한 단계 더 키웠다(원장님 지시). [이전 값] minmax(0,.85fr) minmax(0,1.15fr) */
#master_page .letter .inner{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:64px; align-items:center;}
#master_page .lt_text .msg{margin-top:28px; max-width:520px; font-size:17px; line-height:34px; color:var(--hs-body); word-break:keep-all;}
#master_page .lt_media{display:flex; justify-content:center;}
/* [2026-10-02] 흰 박스(액자)를 없앴다(원장님 지시) - 사진 자체가 펼친 추천서 첩이라 박스 없이 그대로 둔다.
그림자는 상자 모양이 아니라 첩의 윤곽을 따라 지도록 drop-shadow 로 옅게만 준다.
[이전 값] padding:14px; background:#fff; border:1px solid rgba(166,138,100,.35); box-shadow:0 18px 44px rgba(32,43,40,.12)
/ img max-height:560px */
#master_page .lt_frame{display:inline-block; padding:0; background:none; border:0; box-shadow:none;}
#master_page .lt_frame img{display:block; max-width:100%; max-height:680px; width:auto; height:auto;
filter:drop-shadow(0 16px 28px rgba(32,43,40,.16));}
/* --------------------------------------------------------------------------
반응형
-------------------------------------------------------------------------- */
@media all and (max-width:1180px){
#about_page .hero{height:520px; padding-top:170px;}
/* 역사 - 시점 열을 좁히고, 본문은 글 위·사진 아래로 쌓는다(두 열을 나란히 두기엔 폭이 없다) */
#history_page .history{padding:96px 0 120px;}
#history_page .hs_list{--hs-when-w:176px; --hs-axis-w:56px;}
#history_page .hs_row + .hs_row{margin-top:88px;}
#history_page .hs_when{font-size:38px;}
#history_page .hs_when.is_text{font-size:24px;}
#history_page .hs_axis{font-size:38px;}
#history_page .hs_body{display:block;}
#history_page .hs_text{max-width:none;}
#history_page .hs_photo{max-width:520px; margin-top:32px;}
#history_page .hs_desc{line-height:1.85;}
#master_page .master,
#master_page .letter{padding:110px 0;}
#master_page .master .inner,
#master_page .letter .inner{gap:48px;}
#master_page .ms_text .sec_head h2{font-size:32px;}
#about_page .greeting,
#about_page .philosophy{padding:110px 0;}
#about_page .greeting .inner{gap:48px;}
#about_page .philosophy .inner{gap:48px;}
}
@media all and (max-width:900px){
#about_page .hero{height:auto; padding:96px 0 88px;}
#about_page .greeting,
#about_page .philosophy{padding:80px 0;}
/* 사진 → 텍스트 세로 배치. 사진은 과도하게 커지지 않도록 폭 제한 */
/* 사진 → 인사말 → 약력 순으로 쌓는다. 약력이 왼쪽 열(사진 아래)에 있으니 order 로 맨 뒤로 보낸다 */
#about_page .greeting .inner{display:flex; flex-direction:column;}
#about_page .greeting_side{display:contents;}
#about_page .photo_frame{width:100%; max-width:340px; margin:0 auto 40px;}
#about_page .greeting_text .sec_head h2{font-size:32px;}
#about_page .greeting_text .lead{margin-top:22px; font-size:20px; line-height:1.65;}
#about_page .greeting_text .lead br{display:none;}
#about_page .greeting_text .msg{margin-top:24px; padding-top:24px; font-size:17px; line-height:1.9;}
#about_page .greeting_text .msg p + p{margin-top:16px;}
#about_page .greeting_text .sign{margin-top:28px; gap:8px; font-size:14px;}
#about_page .greeting_text .sign .sign_date{font-size:13px;}
#about_page .greeting_text .sign .sign_name{gap:12px;}
#about_page .greeting_text .sign .sign_name:before{width:24px;}
#about_page .greeting_text .sign strong{font-size:22px;}
#about_page .career_box{order:3; margin-top:40px; padding-top:32px;}
#about_page .career_tit{font-size:19px;}
#about_page .career{margin-top:18px;}
#about_page .career li{padding-left:18px; font-size:16px;}
#about_page .career li:before{top:10px; width:6px; height:6px;}
#about_page .career li + li{margin-top:10px;}
#about_page .career .note{font-size:14px;}
#about_page .principle_col .sec_head h2{font-size:32px;}
#about_page .philosophy .inner{display:block;}
#about_page .principle_list li{gap:16px; padding-bottom:24px;}
#about_page .principle_list li + li{margin-top:26px;}
#about_page .principle_list .num{padding-top:7px; font-size:13px;}
#about_page .principle_list .txt strong{font-size:22px;}
#about_page .principle_list .txt span{margin-top:8px; font-size:16px; line-height:1.8;}
/* 실제 진료 사진이 들어간 뒤로는 모바일에서도 노출한다 (사진 아래 배치, 폭 제한) */
#about_page .philosophy_panel{width:100%; max-width:420px; margin:40px auto 0;}
/* 역사 - 축을 왼쪽 끝으로 보내고 시점 → 제목 → 본문 → 사진 순으로 쌓는다.
두 열 그리드(축 | 본문)로 바꾸고 시점은 본문 열 맨 위에 둔다(sticky 해제) */
#history_page .history{padding:64px 0 88px;}
#history_page .hs_list{--hs-when-w:0px; --hs-axis-w:28px;}
#history_page .hs_list:before{left:calc(var(--hs-axis-w) / 2 - 0.5px); top:.5em;}
#history_page .hs_row{grid-template-columns:var(--hs-axis-w) minmax(0,1fr); grid-template-areas:"axis when" "axis body"; column-gap:16px;}
#history_page .hs_row + .hs_row{margin-top:56px;}
#history_page .hs_axis{grid-area:axis; font-size:30px; height:1.3em;}
#history_page .hs_axis:before{width:8px; height:8px; margin:-4px 0 0 -4px; box-shadow:0 0 0 5px var(--hs-paper);}
/* 마름모(축 높이 39px 의 가운데)와 시점 글자의 가운데를 맞추기 위해 같은 높이로 두고 세로 가운데 정렬 */
#history_page .hs_when{grid-area:when; position:static; display:flex; align-items:center; min-height:39px; padding:0; font-size:30px; font-weight:400; line-height:1.3; letter-spacing:-0.5px;}
#history_page .hs_when.is_text{font-size:22px; padding-top:0; line-height:1.3;}
#history_page .hs_body{grid-area:body; display:block; margin-top:14px;}
#history_page .hs_text{max-width:none;}
/* 원고의
은 그대로 둔다 - 숨기면 "시작과깊은" 처럼 두 줄이 띄어쓰기 없이 붙는다(원고에 공백이 없다) */
#history_page .hs_title{font-size:24px;}
#history_page .hs_desc{margin-top:14px; font-size:16px; line-height:1.85;}
#history_page .hs_photo{width:100%; max-width:420px; margin:24px 0 0;}
/* 스승님 - 사진 → 글, 글 → 추천서 순으로 쌓는다 */
#master_page .master,
#master_page .letter{padding:80px 0;}
#master_page .master .inner,
#master_page .letter .inner{display:block;}
#master_page .ms_photo{width:100%; max-width:420px; margin:0 auto 40px;}
#master_page .ms_text .sec_head h2{font-size:28px;}
#master_page .ms_text .sec_head h2 .mo_br{display:inline;}
#master_page .ms_text .lead{margin-top:22px; font-size:19px; line-height:1.65;}
#master_page .ms_text .msg,
#master_page .lt_text .msg{margin-top:20px; font-size:16px; line-height:1.9;}
#master_page .lt_media{margin-top:40px;}
#master_page .lt_frame img{max-height:460px;}
}