/* taeyeun.com
 *
 * 타이포 시스템은 theethru.com(본인 작업) 결을 따른다.
 *   · Montserrat(영문) + Pretendard(한글)
 *   · 잉크 #111 / 배경 #fff, 전역 자간 -0.02em
 *   · 굵기 500·600 위주, 제목은 -0.03em 까지 조임
 *   · 디스플레이는 데스크톱 px · 모바일 vw 로 유동
 *   · 스크롤 진입 시 fade-up
 *
 * ⚠️ 넓은 자간(.05~.08em)과 uppercase 는 **라틴·숫자 전용**이다.
 *    한글에 걸면 글자가 벌어져 깨져 보인다. 한글 요소는 -0.02em 을 쓴다.
 */

:root{
  --bg:#fff;
  --ink:#111;
  --ink-2:#111;
  --muted:#999999;
  --muted-2:#C7C7C7;
  --line:#e5e5e5;
  --line-2:#f4f4f4;
  --accent:#d03283;
  --max:1400px;
  --pad:clamp(20px,4vw,60px);
  --mono:'Montserrat',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* theethru 실측 스케일 — 데스크톱 / 모바일 */
  --f18:18px; --f20:20px; --f22:22px; --f24:24px; --f30:30px; --f-disp:96px;
}

*{box-sizing:border-box}
/* ───────── 기본 글씨 ─────────
 * Montserrat 를 앞에 두되 한글 글리프가 없으므로 자연히 Pretendard 로 넘어간다.
 * 즉 영문·숫자는 Montserrat, 한글은 Pretendard 로 자동 분리된다.
 */
html{
  font-family:'Montserrat','Pretendard Variable','Pretendard',
    -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:16px;                 /* rem 기준점 */
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
}
body{
  margin:0 auto;max-width:1920px;background:var(--bg);color:var(--ink);
  font-size:var(--f20);           /* 본문 기본 20px (모바일 14px) */
  font-weight:400;
  line-height:1.7;
  letter-spacing:-0.02em;         /* 한글 기준 자간 */
  word-break:keep-all;            /* 한글 단어가 중간에서 잘리지 않게 */
  overflow-wrap:break-word;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.3;letter-spacing:-0.03em}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;letter-spacing:inherit}

/* 영문·숫자 전용 라벨 — 넓은 자간과 대문자는 여기서만 쓴다.
   한글에 쓰면 글자가 벌어져 깨져 보인다. */
.mono{
  font-family:var(--mono);font-size:var(--f18);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
}

/* ───────── header ───────── */
header.site{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 var(--pad);height:72px;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:600;font-size:var(--f24);letter-spacing:-0.03em}
header.site nav{display:flex;gap:30px}
header.site nav a{
  font-family:var(--mono);font-size:var(--f18);font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);position:relative;padding:4px 0;transition:color .2s;
}
header.site nav a:hover{color:var(--ink)}
header.site nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1);
}
header.site nav a:hover::after{transform:scaleX(1)}

main{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{margin:clamp(72px,11vw,160px) 0}
section:first-child{margin-top:0}

/* ───────── hero ───────── */
.hero{padding:clamp(80px,14vw,200px) 0 0;max-width:1000px}
.hero.small{padding:clamp(64px,11vw,150px) 0 0}
.eyebrow{color:var(--muted);margin:0 0 clamp(20px,3vw,34px);font-size:var(--f20)}
.hero h1{
  font-size:var(--f-disp);line-height:1.04;letter-spacing:-0.04em;font-weight:600;
  margin:0 0 clamp(24px,3.5vw,42px);
}
.hero h1 em{font-style:normal;font-weight:300;color:var(--muted-2)}
.hero.home h1 em{color:var(--ink);font-weight:600}
.lead{
  color:var(--ink-2);max-width:52ch;margin:0;font-weight:400;
  font-size:var(--f20);line-height:1.8;
}
.stat{color:var(--muted);margin:clamp(28px,4vw,44px) 0 0;font-size:var(--f20)}

/* ───────── section head ───────── */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:clamp(28px,4vw,48px);padding-bottom:18px;border-bottom:1px solid var(--ink);
}
.sec-head h2{margin:0;font-weight:600;font-size:var(--f20);letter-spacing:.04em}
.sec-head a{
  font-family:var(--mono);font-size:var(--f18);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);transition:color .2s;
}
.sec-head a:hover{color:var(--accent)}

/* ───────── 비대칭 대표작 그리드 ───────── */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,5vw,80px) clamp(20px,3vw,44px)}
.grid .card{grid-column:span 6}
.grid.featured .card:nth-child(6n+1){grid-column:span 7}
.grid.featured .card:nth-child(6n+2){grid-column:span 5;align-self:end}
.grid.featured .card:nth-child(6n+3){grid-column:span 5}
.grid.featured .card:nth-child(6n+4){grid-column:span 7;align-self:end}
.grid.featured .card:nth-child(6n+5){grid-column:span 7}
.grid.featured .card:nth-child(6n+6){grid-column:span 5;align-self:end}

.card{display:block}
.thumb{overflow:hidden;background:var(--line-2);aspect-ratio:4/3}
.grid.featured .card:nth-child(6n+2) .thumb,
.grid.featured .card:nth-child(6n+3) .thumb,
.grid.featured .card:nth-child(6n+6) .thumb{aspect-ratio:1/1}
.card .thumb img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .8s cubic-bezier(.16,.84,.24,1);
}
.card:hover .thumb img{transform:scale(1.045)}
.thumb.empty{background:repeating-linear-gradient(45deg,var(--line-2) 0 12px,var(--bg) 12px 24px)}
.card .meta{padding:18px 0 0;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.card h3{margin:0;font-size:var(--f24);font-weight:500;letter-spacing:-0.03em;line-height:1.3}
.card .meta p{margin:0;color:var(--muted);font-size:var(--f18);white-space:nowrap}
.card .meta p .mono{font-size:var(--f18);margin-right:8px}

/* ───────── 탭 필터 ───────── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:clamp(32px,5vw,56px) 0 0}
.tab{
  appearance:none;background:none;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);border-radius:99px;padding:10px 20px;
  color:var(--muted);font-size:var(--f20);font-weight:500;letter-spacing:-0.02em;
  transition:border-color .25s,background .25s,color .25s;
}
.tab:hover{border-color:var(--ink);color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tab .mono{font-size:var(--f18);opacity:.5;margin-left:8px}
.tab.on .mono{opacity:.65}

/* ───────── 더보기 ───────── */
.more-wrap{margin:clamp(44px,6vw,80px) 0;text-align:center}
.more-btn{
  appearance:none;cursor:pointer;background:none;font-family:var(--mono);
  padding:16px 44px;border:1px solid var(--ink);border-radius:99px;
  font-size:var(--f20);font-weight:500;letter-spacing:-0.02em;
  color:var(--ink);transition:background .3s,color .3s;
}
.more-btn:hover{background:var(--ink);color:#fff}
.more-btn .mono{opacity:.55;margin-left:9px}

@keyframes reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal{animation:reveal .5s cubic-bezier(.16,.84,.24,1) both}

/* 스크롤 진입 fade-up */
[data-fade]{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,.84,.24,1),transform .8s cubic-bezier(.16,.84,.24,1)}
[data-fade].in{opacity:1;transform:none}

/* ───────── 인덱스 목록 ───────── */
ul.index{list-style:none;padding:0;margin:clamp(28px,4vw,48px) 0;border-top:1px solid var(--ink)}
ul.index li{border-bottom:1px solid var(--line)}
ul.index a{
  display:grid;grid-template-columns:56px 1fr auto 70px;align-items:baseline;gap:22px;
  padding:clamp(16px,2vw,26px) 4px;transition:padding-left .4s cubic-bezier(.16,.84,.24,1);
}
ul.index a:hover{padding-left:20px}
ul.index .num{color:var(--muted-2);transition:color .25s}
ul.index a:hover .num{color:var(--accent)}
ul.index .ttl{
  font-size:var(--f30);font-weight:500;letter-spacing:-0.035em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
ul.index .cat{color:var(--muted);font-size:var(--f18);white-space:nowrap}
ul.index .yr{color:var(--muted);text-align:right}

.hover-preview{
  position:fixed;top:0;left:0;z-index:40;pointer-events:none;
  width:440px;opacity:0;transition:opacity .3s ease;will-change:transform;
}
.hover-preview.on{opacity:1}
/* 비율을 강제하지 않는다. 캡처는 16:9, 워드프레스 이미지는 제각각이라
   4:3 에 맞추면 좌우가 잘린다. 세로로 아주 긴 것만 아래를 잘라 막는다. */
.hover-preview img{
  display:block;width:100%;height:auto;max-height:62vh;
  object-fit:cover;object-position:top center;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}

/* ───────── 타임라인 ─────────
 * 가운데 세로선을 두고 좌우 교차. 항목마다 날짜가 선 옆에 붙고
 * 짧은 가로 연결선으로 선 위의 점과 이어진다.
 * 이미지는 원본 비율 그대로 — 모바일 시안은 세로로, 웹은 가로로 나온다.
 */
.timeline{
  position:relative;margin:clamp(40px,6vw,80px) 0 0;padding:0 0 40px;
  --tl-gap:clamp(40px,5vw,72px);   /* 항목 가장자리 ↔ 가운데 선 거리 */
  --tl-top:66px;                   /* 세로선과 검은 점이 시작하는 높이 */
}
/* 세로선은 NOW 아래 검은 점에서 시작한다 (위로 뻗지 않는다) */
.timeline::before{
  content:"";position:absolute;left:50%;top:var(--tl-top);bottom:0;width:1px;
  background:var(--ink);transform:translateX(-.5px);
}
/* 맨 위 NOW — 선 왼쪽에 붙는다 */
.tl-now{position:relative;height:calc(var(--tl-top) + clamp(36px,5vw,64px))}
.tl-now span{
  position:absolute;top:0;right:50%;margin-right:24px;line-height:1;
  font-size:var(--f30);font-weight:700;letter-spacing:.12em;color:var(--ink);
}
/* 검은 점 = 세로선의 시작점 */
.tl-now::after{
  content:"";position:absolute;left:50%;top:var(--tl-top);
  width:13px;height:13px;border-radius:50%;background:var(--ink);
  transform:translate(-50%,-50%);z-index:3;
}

.tl-item{
  position:relative;width:50%;margin-bottom:clamp(56px,8vw,120px);
}
.tl-item.left{margin-right:auto;padding-right:var(--tl-gap);text-align:right}
.tl-item.right{margin-left:auto;padding-left:var(--tl-gap);text-align:left}

/* 날짜 · 연결선 · 점을 한 요소에 묶는다.
   따로 두면 기준점이 달라 세로 정렬이 어긋난다. */
.tl-item .tl-date{
  position:relative;display:inline-block;
  font-size:var(--f18);font-weight:500;letter-spacing:.02em;color:var(--muted);
  text-transform:none;line-height:1;
  margin-bottom:14px;
}
/* 가로 연결선 — 날짜 세로 중앙에서 가운데 선까지 */
.tl-item .tl-date::after{
  content:"";position:absolute;top:50%;height:1px;background:var(--ink);
}
/* 선 위의 점 — 연결선 끝, 즉 정확히 가운데 선 위 */
.tl-item .tl-date::before{
  content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--accent);
  margin-top:-5.5px;z-index:2;transition:background .25s;
}
/* 점은 날짜 바로 옆, 연결선은 그 점에서 가운데 선까지 */
.tl-item.left  .tl-date::before{left:calc(100% + 8px)}
.tl-item.right .tl-date::before{right:calc(100% + 8px)}
.tl-item.left  .tl-date::after {left:calc(100% + 17px);width:calc(var(--tl-gap) - 17px)}
.tl-item.right .tl-date::after {right:calc(100% + 17px);width:calc(var(--tl-gap) - 17px)}
.tl-item:hover .tl-date::before{background:var(--accent)}

.tl-title{
  margin:4px 0 16px;font-size:var(--f24);font-weight:700;
  letter-spacing:-0.03em;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
/* 이미지는 자르지 않는다 — 실제 비율이 곧 작업의 성격이다 */
.tl-shot{
  overflow:hidden;background:var(--line-2);border:1px solid var(--line);
  max-height:640px;
}
.tl-shot img{
  width:100%;height:auto;display:block;object-position:top center;
  transition:transform .9s cubic-bezier(.16,.84,.24,1);
}
.tl-item:hover .tl-shot img{transform:scale(1.03)}
.tl-shot.empty{
  aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg,var(--line-2) 0 10px,var(--bg) 10px 20px);
}
.tl-cat{margin:12px 0 0;color:var(--muted);font-size:var(--f18)}

/* ───────── 도구 ───────── */
.grid.tools{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:22px}
.card.tool{
  grid-column:auto;border:1px solid var(--line);padding:clamp(28px,3.5vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;min-height:200px;
  transition:border-color .3s,background .3s;
}
.card.tool:hover{border-color:var(--ink)}
.card.tool .meta{padding:0;display:block}
.card.tool h3{font-size:var(--f30);margin-bottom:14px}
.card.tool .meta p{font-size:var(--f20);line-height:1.7;color:var(--muted);white-space:normal}
.card.tool::after{
  content:"→";margin-top:26px;color:var(--muted);font-size:1.1rem;
  transition:transform .3s cubic-bezier(.16,.84,.24,1),color .3s;
}
.card.tool:hover::after{transform:translateX(8px);color:var(--accent)}
.tools-sec .lead{margin-bottom:clamp(24px,3vw,36px)}

/* ───────── 작업 상세 ───────── */
article.work header{
  padding:clamp(64px,10vw,130px) 0 clamp(30px,4vw,52px);
  border-bottom:1px solid var(--ink);margin-bottom:clamp(36px,5vw,72px);
}
/* 제목·설명은 읽기 좋은 폭으로 묶되, 구분선은 본문 폭 전체를 지나가게 한다 */
article.work header > *{max-width:960px}
.crumb{
  color:var(--muted);margin:0 0 clamp(18px,3vw,30px);
  font-size:var(--f18);font-weight:400;letter-spacing:-0.02em;
}
.crumb a{color:var(--muted);transition:color .2s}
.crumb a:hover{color:var(--accent)}
article.work h1{font-size:clamp(2.2rem,6vw,4rem);margin:0 0 16px;letter-spacing:-0.045em;font-weight:600;line-height:1.05}
.date{color:var(--muted);margin:0;font-family:var(--mono);font-size:var(--f18);font-weight:500;letter-spacing:.02em}
.summary{font-size:var(--f24);line-height:1.7;color:var(--ink-2);margin:22px 0 0;max-width:54ch}
.role{color:var(--ink-2);font-size:var(--f20);margin:22px 0 0}
.stack{margin:18px 0 0;display:flex;gap:7px;flex-wrap:wrap}
.stack span{
  font-size:var(--f18);font-weight:400;letter-spacing:-0.02em;
  padding:7px 16px;border:1px solid var(--line);border-radius:99px;color:var(--ink-2);
}
.btn{
  display:inline-block;margin-top:22px;padding:14px 28px;background:var(--ink);color:#fff;
  border-radius:99px;font-size:var(--f20);font-weight:500;
  letter-spacing:-0.02em;transition:background .3s;
}
.btn:hover{background:var(--accent)}
.content{overflow-wrap:break-word;font-size:var(--f20);line-height:1.85}
.content p{margin:0 0 22px}
.content h2,.content h3,.content h4{margin:36px 0 14px;font-weight:600;letter-spacing:-0.03em}
.content h2{font-size:var(--f30)} .content h3{font-size:var(--f24)}
.content ul,.content ol{margin:0 0 22px;padding-left:24px}
.content li{margin:0 0 8px}
.content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.content strong{font-weight:600}
/* 이미지만 들어 있는 문단은 간격 없이 붙인다 — 시안이 연속으로 이어지도록 */
.content img{margin:0 auto}
.content p:has(img):not(:has(> :not(img):not(br))){margin:0}
.content p > img:only-child{display:block}
.written{max-width:62ch;margin:0 auto clamp(36px,5vw,64px)}
.written p{margin:0 0 22px;color:var(--ink-2);font-size:var(--f20);line-height:1.85}
.written h3{font-size:var(--f24);margin:32px 0 12px}
.written ul{margin:0 0 22px;padding-left:24px}
.written a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* 본문에 넣은 캡처는 읽기 폭에 갇히지 않고 넓게 보이도록 */
.written img{width:100%;margin:26px 0;border:1px solid var(--line)}
.written:has(img){max-width:960px}
figure.shot{margin:0}
figure.shot img{width:100%;border:1px solid var(--line)}
figure.shot figcaption{margin-top:16px;color:var(--muted);text-align:center;
  font-size:var(--f18);letter-spacing:-0.02em;text-transform:none}
.empty-note{color:var(--muted);padding:56px 0;text-align:center;font-size:var(--f20)}
.prose{max-width:60ch;margin:clamp(32px,4vw,52px) 0}
.prose p{margin:0 0 22px;color:var(--ink-2);font-size:var(--f20);line-height:1.85}

/* ───────── footer ───────── */
footer.site{
  max-width:var(--max);margin:clamp(100px,13vw,170px) auto 0;
  padding:36px var(--pad) 80px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--muted);font-size:var(--f20);font-weight:400;letter-spacing:-0.02em;
}
footer.site p{margin:0}
footer.site a{color:var(--muted);transition:color .2s}
footer.site a:hover{color:var(--accent)}

/* ───────── 반응형 — 모바일은 vw 로 유동 ───────── */
@media(max-width:1200px){
  :root{--f-disp:8vw}
}
@media(max-width:800px){
  .grid .card,.grid.featured .card:nth-child(n){grid-column:span 6;align-self:auto}
  .grid.featured .card .thumb{aspect-ratio:4/3}
  /* 모바일: 선을 왼쪽으로 붙이고 1열로 */
  .timeline::before{left:8px;transform:none}
  .tl-now{text-align:left;padding-left:0}
  .tl-now span{padding:0 12px 0 0}
  .tl-now::after{left:8px;transform:translateX(-50%)}
  .tl-item,.tl-item.left,.tl-item.right{
    width:100%;margin:0 0 44px;padding:0 0 0 34px;text-align:left;
  }
  .timeline{--tl-gap:34px;--tl-top:44px}
  .tl-now span{right:auto;left:0;margin-right:0}
  .tl-now::after{left:8px}
  .tl-item.left .tl-date::before,.tl-item.right .tl-date::before{
    right:calc(100% + 8px);left:auto;
  }
  .tl-item.left .tl-date::after,.tl-item.right .tl-date::after{
    right:calc(100% + 17px);left:auto;width:calc(var(--tl-gap) - 17px);
  }
  .tl-shot{max-height:none}
}
@media(max-width:767px){
  /* theethru 모바일 실측: font_18/20/22 → 14px, font_24 → 16px, font_30 → 20px */
  :root{--f18:14px; --f20:14px; --f22:14px; --f24:16px; --f30:20px; --f-disp:12vw}
  header.site{height:60px}
  header.site nav{gap:16px}
  header.site nav a{letter-spacing:.06em}
  .hero h1{line-height:1.08}
  .lead{line-height:1.75}

  .grid,.grid.featured{gap:28px 14px}
  .grid.tools{grid-template-columns:1fr}
  .card .meta{flex-direction:column;gap:4px;align-items:flex-start}

  ul.index a{grid-template-columns:36px 1fr 54px;gap:14px;padding:16px 2px}
  ul.index a:hover{padding-left:6px}
  ul.index .cat{display:none}

  .hover-preview{display:none}

  article.work h1{font-size:8vw}
}

/* 접근성 */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  [data-fade]{opacity:1;transform:none}
  .hover-preview{display:none}
  html{scroll-behavior:auto}
}

/* ───────── 기기 목업 ─────────
 * 작업 상세 페이지 상단. 노트북·태블릿·휴대폰을 정면으로 세워 겹친다.
 * 기울이지 않는다 — 비스듬히 두면 화면이 작아지고 글씨를 못 읽는다.
 *
 * 노트북은 실제 기기 이미지(frames/laptop.png)를 쓴다. 화면 부분이 뚫려 있어
 * 캡처를 뒤(z-index 1)에 깔면 화면 안에 든 것처럼 보인다.
 * 아래 .mk-laptop .mk-screen 의 좌표가 그 구멍 위치다 — 이미지를 바꾸면 다시 재야 한다.
 * 태블릿·휴대폰 몸체는 CSS 로 그린다.
*/
.mockup{margin:0 0 clamp(36px,5vw,64px)}
.mk-scene{
  position:relative; aspect-ratio:900/700; overflow:hidden; border-radius:10px;
  background:
    radial-gradient(120% 90% at 78% 12%, #ffffff 0%, rgba(255,255,255,0) 58%),
    linear-gradient(160deg, #eceae6 0%, #e2ded8 55%, #d8d3cb 100%);
}
.mk-screen{overflow:hidden; background:#fff}
.mk-screen img{display:block; width:100%; height:auto; object-fit:cover; object-position:top center}

/* 노트북 — 실제 기기 이미지, 화면은 뚫린 자리에 캡처를 깐다 */
.mk-laptop{position:absolute; right:6%; top:8%; width:69%}
.mk-laptop .mk-body{
  display:block; width:100%; height:auto; position:relative; z-index:2;
  filter:drop-shadow(0 22px 30px rgba(60,50,40,.22));
}
.mk-laptop .mk-screen{      /* frames/laptop.png 의 화면 구멍 좌표 */
  position:absolute; z-index:1;
  left:10.59%; top:2.168%; width:78.842%; height:67.161%;
}

/* 태블릿 — 그 폭에 대응하는 사이트에만 나온다 */
.mk-tablet{position:absolute; left:11%; bottom:8%; width:28%; z-index:3}
.mk-tablet .mk-frame{
  background:#2b2c30; border-radius:15px; padding:3.2%;
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
.mk-tablet .mk-screen{aspect-ratio:834/1112; border-radius:5px}

/* 휴대폰 */
.mk-phone{position:absolute; left:30%; bottom:6%; width:15.5%; z-index:4}
.mk-phone .mk-frame{
  position:relative; background:#2b2c30; border-radius:15%/7%; padding:3.4%;
  box-shadow:0 16px 30px rgba(0,0,0,.26);
}
.mk-phone .mk-screen{aspect-ratio:390/844; border-radius:11%/5%}
.mk-island{
  position:absolute; top:5%; left:50%; transform:translateX(-50%);
  width:30%; height:1.9%; background:#151619; border-radius:20px; z-index:2;
}

/* 태블릿이 빠지면 휴대폰을 왼쪽으로 옮겨 빈자리를 메운다 */
.mk-scene.no-tablet{aspect-ratio:900/620}
.mk-scene.no-tablet .mk-phone{left:8%; bottom:6%; width:18%}

/* 좁은 화면 — 겹치면 화면이 너무 작아진다. 노트북은 폭을 채우고 나머지를 아래에 둔다. */
@media (max-width:760px){
  .mk-scene{aspect-ratio:900/700}
  .mk-laptop{position:static; width:100%}
  .mk-tablet{left:2%; bottom:2%; width:34%}
  .mk-phone{left:40%; bottom:0; width:19%}
  .mk-scene.no-tablet{aspect-ratio:900/640}
  .mk-scene.no-tablet .mk-phone{left:2%; width:22%}
}

/* ───────── 편집 모드 ─────────
 * 관리자로 들어왔을 때만 목록·상세에 [수정] 이 붙는다.
 * 이 버튼이 가리키는 곳은 내 컴퓨터의 관리자(localhost:8791)라
 * 다른 사람 화면에 보여도 쓸 수 없다.
*/
.edit-toggle{color:var(--muted-2);font-size:12px}
.edit-toggle:hover{color:var(--accent)}

.edit-btn{
  position:absolute; z-index:20; top:6px; right:6px;
  padding:3px 9px; border-radius:5px;
  background:var(--ink); color:#fff;
  font-size:11px; line-height:1.6; letter-spacing:.02em;
  text-decoration:none; opacity:0; transition:opacity .18s ease;
}
.edit-btn:hover{background:var(--accent)}
/* 평소엔 숨기고 해당 항목에 마우스를 올렸을 때만 보여준다 */
.edit-on [data-slug]{position:relative}
.edit-on [data-slug]:hover > .edit-btn,
.edit-on .edit-btn:focus{opacity:1}
/* 상세 페이지는 늘 보이게 (항목이 하나뿐이라 찾기 어렵다) */
.edit-on article.work > .edit-btn{opacity:1; top:0; right:0}

@media (max-width:760px){
  .edit-btn{opacity:1}   /* 터치 기기에는 hover 가 없다 */
}

/* ───────── 문의 폼 ─────────
 * 정적 사이트라 받는 곳이 설정에 따라 달라진다 (메일 앱 / 보내는 주소).
 * 화면은 어느 쪽이든 같다.
*/
.contact{max-width:640px;margin:clamp(28px,4vw,44px) 0 0}
.cf-row{margin-bottom:22px}
.cf-row label{
  display:block;font-size:var(--f18);color:var(--muted);
  margin-bottom:9px;letter-spacing:-.01em;
}
.cf-row input,.cf-row textarea{
  width:100%;padding:14px 16px;
  border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);
  font:inherit;font-size:var(--f20);line-height:1.6;
  transition:border-color .15s ease;
}
.cf-row textarea{resize:vertical;min-height:160px}
.cf-row input:focus,.cf-row textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.06);
}
.cf-row input::placeholder,.cf-row textarea::placeholder{color:var(--muted-2)}

/* 로봇 거르개 — 사람 눈에 띄지 않게 하되 display:none 은 피한다
   (일부 로봇이 숨겨진 칸을 건너뛴다) */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.cf-msg{margin:0;font-size:var(--f18);color:var(--muted);line-height:1.6}
.cf-msg.bad{color:var(--accent)}

@media (max-width:760px){
  .cf-row input,.cf-row textarea{padding:12px 14px}
  .cf-row textarea{min-height:140px}
}

/* 문의 버튼 — 사이트 .btn(분홍 알약)은 이 폼에 과하다. 차분하게 둔다 */
.cf-send{
  appearance:none;border:1px solid var(--ink);background:var(--ink);color:#fff;
  padding:14px 34px;border-radius:8px;
  font:inherit;font-size:var(--f20);font-weight:600;letter-spacing:-.01em;
  cursor:pointer;transition:opacity .15s ease;
}
.cf-send:hover{opacity:.85}
.cf-send:disabled{opacity:.5;cursor:default}