/* ============================================================
   시선 時線 — 민경욱 | style.css
   순백의 미니멀 문학 사이트 (ref: sullalee.com)
   ============================================================ */
:root{
  --bg:#ffffff;
  --ink:#1e1e1e;
  --soft:#5c5c5c;
  --faint:#9a9a9a;
  --line:#ececec;
  --serif:"Gowun Batang","Noto Serif KR","Nanum Myeongjo",serif;
  --sans:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

.wrap{max-width:680px;margin:0 auto;padding:0 24px;}

/* ---------- language toggle ---------- */
html[data-lang="ko"] .en{display:none !important;}
html[data-lang="en"] .ko{display:none !important;}
.lang-switch{
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:999px;padding:3px;background:#fff;
}
.lang-switch button{
  border:0;background:transparent;cursor:pointer;
  font-size:.66rem;letter-spacing:.1em;padding:4px 10px;border-radius:999px;
  color:var(--faint);transition:background .2s,color .2s;
}
.lang-switch button.on{background:var(--ink);color:#fff;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.site-header.scrolled{border-bottom-color:var(--line);}
.nav{
  max-width:900px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 24px;
}
/* 메뉴(소개·집필)를 화면 정중앙에 — 좌(로고)·우(언어/☰)를 같은 폭으로 */
.nav > .brand{flex:1 1 0;min-width:0;}
.nav > div:last-child{flex:1 1 0;min-width:0;justify-content:flex-end;}
.nav-links{flex:0 0 auto;justify-content:center;}
.ox-about{
  display:block;
  margin:clamp(26px,4vw,40px) auto 0;
  width:clamp(104px,14vw,136px);height:auto;
  transform:scaleX(-1);   /* 좌우 반전 — 오른쪽을 바라보게 */
}
/* 글 읽기 화면 끝의 작은 소 (전체 화면이라 다른 소와 겹쳐 보이지 않음) */
.ox-post{
  display:block;margin:30px auto 0;
  width:clamp(47px,4.2vw,60px);height:auto;opacity:.92;   /* 폰 47px ~ PC 60px */
}
/* 한국어 모드: 시선 + SISUN (기존 형태) */
.brand .brand-ko{
  display:block;
  font-family:var(--serif);font-size:1.15rem;letter-spacing:.14em;font-weight:700;
}
.brand .brand-ko small{
  display:block;margin-top:-3px;
  font-family:var(--sans);font-size:.62rem;font-weight:400;
  color:var(--faint);letter-spacing:.28em;
}
/* 영어 모드: SISUN + 아래 時線 — 한국어 로고와 동일한 크기·배치 */
.brand .brand-en{
  display:block;
  font-family:var(--sans);font-size:.88rem;letter-spacing:.14em;font-weight:700;
}
.brand .brand-en .sisun-word{
  display:inline-block;font-weight:700;
  transform:scale(.88, 1.02);   /* 장평 축소 + 상하 2% 확대 */
  transform-origin:left bottom;
}
.brand .brand-en small{
  display:block;margin-top:-3px;
  font-family:var(--serif);font-size:.673rem;font-weight:400;
  color:#b5b2aa;letter-spacing:.28em;
}
.nav-links{display:flex;gap:clamp(12px,2.2vw,26px);list-style:none;align-items:center;}
.nav-links a{
  font-size:.82rem;color:var(--soft);letter-spacing:.06em;
  padding:5px 2px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
  text-align:center;display:inline-block;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);border-bottom-color:var(--ink);}
/* 집필 — 크기는 동일, 약간 더 진하게 강조 */
.nav-links a.nav-writings{font-weight:600;color:#4c4a45;}
.nav-links a.nav-writings:hover{color:var(--ink);}
.nav-links a.nav-writings.active{color:var(--ink);}
.nav-links a.muted{color:#bdbab2;}
.nav-links a.muted:hover{color:var(--soft);}
.nav-links a.muted.active{color:#a9a69e;border-bottom-color:#c9c6be;}
.board-head h1.muted{color:#b3b0a8;}
.post-row .btag.muted{color:#c3c0b8;}
.nav-toggle{
  display:block;border:0;background:transparent;cursor:pointer;
  width:38px;height:38px;position:relative;
}
.nav-toggle span{position:absolute;left:8px;right:8px;height:1.4px;background:var(--ink);transition:all .3s;}
.nav-toggle span:nth-child(1){top:13px;}
.nav-toggle span:nth-child(2){top:19px;}
.nav-toggle span:nth-child(3){top:25px;}
.nav-toggle.open span:nth-child(1){top:19px;transform:rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){top:19px;transform:rotate(-45deg);}

/* ---------- 전체 메뉴 오버레이 (차례) ---------- */
.menu-overlay{
  position:fixed;inset:0;z-index:90;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s;
  overflow-y:auto;
}
.menu-overlay.open{opacity:1;visibility:visible;}
.menu-inner{
  max-width:560px;margin:0 auto;
  padding:clamp(92px,15vh,140px) 24px 90px;
}
.menu-cap{
  text-align:center;font-size:.68rem;color:var(--faint);letter-spacing:.4em;
  margin-bottom:clamp(24px,4vh,38px);
}
.menu-list a{
  display:block;text-align:center;
  padding:clamp(13px,2.2vh,19px) 8px;
  border-bottom:1px solid #f2f1ee;
  opacity:0;transform:translateY(10px);
  transition:background .2s;
}
.menu-list a:first-child{border-top:1px solid #f2f1ee;}
.menu-overlay.open .menu-list a{
  opacity:1;transform:none;
  transition:opacity .45s ease,transform .45s ease,background .2s;
}
.menu-overlay.open .menu-list a:nth-child(1){transition-delay:.04s;}
.menu-overlay.open .menu-list a:nth-child(2){transition-delay:.08s;}
.menu-overlay.open .menu-list a:nth-child(3){transition-delay:.12s;}
.menu-overlay.open .menu-list a:nth-child(4){transition-delay:.16s;}
.menu-overlay.open .menu-list a:nth-child(5){transition-delay:.2s;}
.menu-overlay.open .menu-list a:nth-child(6){transition-delay:.24s;}
.menu-overlay.open .menu-list a:nth-child(7){transition-delay:.28s;}
.menu-overlay.open .menu-list a:nth-child(8){transition-delay:.32s;}
.menu-overlay.open .menu-list a:nth-child(9){transition-delay:.36s;}
.menu-overlay.open .menu-list a:nth-child(10){transition-delay:.4s;}
.menu-list a:hover{background:#fafaf8;}
.menu-list .m-name{
  display:block;font-family:var(--serif);
  font-size:clamp(1.02rem,2.8vw,1.26rem);font-weight:600;color:var(--soft);
  letter-spacing:.06em;line-height:1.55;transition:color .2s;
}
.menu-list a:hover .m-name,
.menu-list a.active .m-name{color:var(--ink);}
.menu-list .m-desc{
  display:block;margin-top:4px;
  font-size:.68rem;color:#bdbab2;letter-spacing:.09em;line-height:1.55;
}
.menu-list a.muted .m-name{color:#c3c0b8;}
.menu-list a.muted:hover .m-name{color:var(--soft);}
@media (prefers-reduced-motion:reduce){
  .menu-overlay,.menu-list a,.menu-overlay.open .menu-list a{transition:none;transform:none;}
}

/* ---------- front (about) ---------- */
.front{
  text-align:center;
  padding:clamp(56px,9vw,96px) 24px 40px;
}
.photo-rotator{
  width:clamp(72px,12.6vw,101px);    /* PC 101px · 폰 72px (추가 10% 축소) */
  height:clamp(72px,12.6vw,101px);
  margin:0 auto 36px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  box-shadow:0 0 0 1px var(--line);
}
.photo-rotator img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.8s ease;
}
.photo-rotator img.on{opacity:1;}

.front h1{
  font-family:var(--serif);
  font-size:clamp(1.9rem,5vw,2.6rem);
  font-weight:700;letter-spacing:.2em;
}
.front .meaning{
  margin-top:10px;color:var(--soft);font-size:.95rem;
  font-family:var(--serif);letter-spacing:.08em;
}
.front .realname{
  margin-top:22px;font-size:.8rem;color:var(--faint);letter-spacing:.24em;
}
.front .roles{
  margin-top:6px;font-size:.9rem;color:var(--soft);letter-spacing:.12em;
}

/* ---------- sections on front ---------- */
.about-block{
  padding:clamp(36px,6vw,60px) 0;
  border-top:1px solid var(--line);
}
.about-block h2{
  font-family:var(--serif);font-size:1.05rem;font-weight:700;
  letter-spacing:.22em;color:var(--ink);
  text-align:center;margin-bottom:26px;
}
.about-block .bio{color:var(--soft);font-size:.95rem;text-align:center;}
.about-block .bio p + p{margin-top:14px;}

.info-list{list-style:none;max-width:520px;margin:0 auto;}
.info-list li{
  display:grid;grid-template-columns:96px 1fr;gap:18px;
  padding:10px 0;border-bottom:1px solid #f4f4f4;
  font-size:.88rem;color:var(--soft);
}
.info-list li:last-child{border-bottom:0;}
.info-list .k{color:var(--faint);font-size:.76rem;letter-spacing:.14em;padding-top:3px;}

/* ---------- contact ---------- */
.contact-block{text-align:center;}
.contact-block .mail-main a{
  font-size:.82rem;letter-spacing:.03em;   /* 서브 메일(.74rem)보다 조금만 크게 */
  border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:border-color .2s;
}
.contact-block .mail-main a:hover{border-color:var(--ink);}
.contact-block .mail-sub{margin-top:10px;}
.contact-block .mail-sub a{font-size:.74rem;color:#b3b0aa;}
.contact-block .mail-sub a:hover{color:var(--soft);}

/* ---------- board page ---------- */
.board-head{
  text-align:center;
  padding:clamp(48px,8vw,84px) 24px clamp(28px,5vw,48px);
}
.board-head h1{
  font-family:var(--serif);font-size:clamp(1.6rem,4.5vw,2.2rem);
  font-weight:700;letter-spacing:.14em;
}
.board-head .desc{margin-top:12px;color:var(--faint);font-size:.86rem;letter-spacing:.1em;}

.post-list{list-style:none;border-top:1px solid var(--line);}
.post-row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  padding:20px 4px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .2s;
}
.post-row:hover{background:#fafafa;}
.post-row .title{
  font-family:var(--serif);font-size:1.02rem;font-weight:600;
  flex-basis:100%;order:5;
  white-space:normal;line-height:1.6;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-row .date{
  font-size:.74rem;color:var(--faint);letter-spacing:.08em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  margin-left:auto;
}
.post-row .btag{
  font-size:.66rem;color:var(--faint);letter-spacing:.1em;
  border:1px solid var(--line);border-radius:999px;
  padding:2px 10px;white-space:nowrap;
}
.post-row .excerpt{
  flex-basis:100%;order:9;
  font-family:var(--serif);font-size:.84rem;color:#b0aeaa;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-top:0;text-align:center;
}
.empty-note{
  text-align:center;color:var(--faint);font-size:.88rem;
  padding:70px 0;
}

/* ---------- 집필 (writings) ---------- */
.book-block{margin-bottom:clamp(46px,8vw,72px);text-align:center;}
.book-title{
  display:inline-block;font-family:var(--serif);
  font-size:clamp(1.1rem,3vw,1.3rem);font-weight:700;
  letter-spacing:.1em;color:var(--ink);transition:color .2s;
}
.book-title:hover{color:var(--soft);}
.book-block.muted .book-title{color:#b3b0a8;}
.book-sub{margin-top:6px;font-size:.7rem;color:var(--faint);letter-spacing:.1em;line-height:1.6;}
.book-block .post-list{margin-top:18px;text-align:left;}
.book-empty{
  margin-top:18px;padding:24px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:#c6c4bf;font-size:.8rem;letter-spacing:.08em;
}
.more-link{text-align:right;margin-top:14px;}
.more-link a{font-size:.74rem;color:var(--soft);letter-spacing:.08em;transition:color .2s;}
.more-link a:hover{color:var(--ink);}

/* ---------- post overlay ---------- */
.post-overlay{
  position:fixed;inset:0;z-index:200;
  background:#fff;
  display:none;overflow-y:auto;
}
.post-overlay.open{display:block;}
.post-panel{
  max-width:620px;margin:0 auto;
  padding:clamp(70px,12vw,120px) 28px 120px;
  animation:fadeUp .5s ease;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.post-panel .close{
  position:fixed;top:22px;right:26px;
  border:0;background:transparent;cursor:pointer;
  font-size:1.7rem;color:var(--faint);line-height:1;padding:8px;
}
.post-panel .close:hover{color:var(--ink);}
.post-panel .p-board{
  text-align:center;font-size:.72rem;color:var(--faint);letter-spacing:.26em;
}
.post-panel h2{
  text-align:center;
  font-family:var(--serif);font-size:clamp(1.4rem,4vw,1.9rem);
  font-weight:700;letter-spacing:.06em;
  margin:14px 0 8px;line-height:1.5;
}
.post-panel .p-date{
  text-align:center;font-size:.74rem;color:var(--faint);letter-spacing:.12em;
  margin-bottom:clamp(36px,6vw,54px);
}
.post-panel .p-body{
  font-family:var(--serif);
  font-size:1.02rem;line-height:2.15;color:#2c2c2c;
  white-space:pre-line;
}
.post-panel .p-copy{
  display:block;margin:0 auto;
  border:0;background:none;cursor:pointer;
  font-size:.68rem;color:#c4c2bd;letter-spacing:.16em;
  padding:4px 8px;margin-top:-38px;margin-bottom:38px;
  transition:color .2s;
}
.post-panel .p-copy:hover{color:var(--soft);}
.post-panel .p-media{margin-top:44px;display:grid;gap:22px;}
.post-nav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:clamp(48px,8vw,72px);
  border-top:1px solid var(--line);padding-top:20px;
}
.post-nav button{
  border:0;background:none;cursor:pointer;
  font-family:var(--serif);font-size:.88rem;color:var(--soft);
  padding:8px 4px;max-width:42%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .2s;
}
.post-nav button:hover{color:var(--ink);}
.post-nav button:disabled{opacity:.25;cursor:default;}
.post-nav .pn-hint{font-size:.68rem;color:#c9c7c2;letter-spacing:.12em;white-space:nowrap;}
.post-panel .p-media img{width:auto;max-width:100%;max-height:72vh;margin:0 auto;}
.post-panel .p-media video{width:100%;max-height:72vh;background:#000;object-fit:contain;}

/* ---------- youtube lite embed ---------- */
.video-embed{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#111 center/cover no-repeat;cursor:pointer;overflow:hidden;
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-embed .play-btn{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  transition:background .25s;
}
.video-embed:hover .play-btn{background:rgba(0,0,0,.55);}
.video-embed .play-btn::after{
  content:"";border-style:solid;border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent #fff;margin-left:4px;
}
.yt-link{
  font-size:.72rem;color:var(--faint);letter-spacing:.14em;
  justify-self:end;border-bottom:1px solid var(--line);padding-bottom:1px;
}
.yt-link:hover{color:var(--ink);border-color:var(--ink);}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);   /* 이 선이 '길' — 소가 그 위를 걷는다 */
  margin-top:clamp(40px,8vw,80px);
  padding:34px 24px 48px;
  text-align:center;
  position:relative;
}
/* 길(푸터 상단 선) 위를 화면 끝에서 끝까지 걸어가는 소 */
.ox-road-track{
  position:absolute; top:0; left:0; width:100%;
  transform:translateY(-100%);
  height:120px; overflow:hidden;
  pointer-events:none;
}
.ox-road{
  position:absolute; bottom:-2px; right:0;
  width:clamp(38px,4.7vw,47px); height:auto;   /* 폰 38px ~ PC 47px */
  animation:ox-cross 110s linear infinite;   /* 여유 있게 천천히 걷는 속도 */
}
@keyframes ox-cross{
  from{ transform:translateX(110%); }             /* 오른쪽 밖에서 등장 */
  to  { transform:translateX(calc(-100vw - 120%)); } /* 왼쪽 끝 밖으로 퇴장 */
}
@media (prefers-reduced-motion:reduce){
  .ox-road{ animation:none; right:6%; }
}
.footer-name{font-family:var(--serif);font-size:.95rem;letter-spacing:.2em;}
.footer-copy{margin-top:10px;font-size:.7rem;color:var(--faint);letter-spacing:.08em;}
.admin-link{
  font-size:.66rem;letter-spacing:.18em;color:#c8c6c1;margin-left:12px;
  transition:color .2s;
}
.admin-link:hover{color:var(--soft);}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .photo-rotator img{transition:none;}
}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .nav{height:58px;}
  .info-list li{grid-template-columns:80px 1fr;gap:12px;}
  /* 글 목록(폰): 여백·날짜 크기만 살짝 축소 */
  .post-row{gap:4px 10px;padding:16px 4px;}
  .post-row .date{font-size:.7rem;}
}
/* 좁은 화면 + 영어 모드: 긴 메뉴가 겹치지 않게 축소 */
@media (max-width:600px){
  html[data-lang="en"] .nav-links{gap:10px;}
  html[data-lang="en"] .nav-links a{font-size:.68rem;letter-spacing:.02em;}
  html[data-lang="en"] .lang-switch button{padding:3px 7px;font-size:.58rem;letter-spacing:.06em;}
  html[data-lang="en"] .nav{padding:0 14px;}
  html[data-lang="en"] .nav-toggle{width:32px;}
}