/*
Theme Name: MemoryCord Ceremony
Theme URI: https://ceremony.memorycordkorea.com
Author: MemoryCord
Description: 메모리코드 본식사진 사이트 커스텀 테마
Version: 3.1
Text Domain: memorycord
*/

:root{
  --bg: #000;
  --text: #fff;
  --text-2: #8c8c8c;
  --text-3: #5c5c5c;
  --line: rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.06);
  --page: 1280px;
  --pad: 20px;
  --side: 400px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo",sans-serif;
  font-weight:380;
  font-size:17px;
  line-height:172%;
  -webkit-font-smoothing:antialiased;
}
/* 인라인 영문 보조 표기 */
.en{
  font-size:.82em;
  color:var(--text-3);
  letter-spacing:.06em;
  margin-left:7px;
}
/* 영문 전용 요소는 Geist(레퍼런스와 동일 계열) */
.site-header .brand,
.hero .who,
.hero .role,
.label,
.work-client,
.tags span,
.en{font-family:"Geist","Inter",-apple-system,sans-serif}
.label .ko{font-family:"Pretendard Variable","Pretendard",sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}

/* 루트: 1280px 고정폭 + 20px 패딩, 블록 간 60px */
.page{
  max-width:var(--page);
  margin:0 auto;
  padding:0 var(--pad) var(--pad);
  display:flex;
  flex-direction:column;
  gap:60px;
}

/* 공통 2단 행: 400px 좌측 + flex:2 우측 */
.row{
  display:flex;
  flex-flow:row;
  gap:20px;
  width:100%;
  align-items:flex-start;
}
.row > .side{width:var(--side);flex:none}
.row > .main{flex:2 0 0;width:1px}

h1,h2,h3{font-weight:380;letter-spacing:-1.4px;line-height:115%;margin:0}
h1{font-size:46px}
h2{font-size:30px}
h3{font-size:17px;letter-spacing:-.2px}

.muted{color:var(--text-2)}
/* 섹션 라벨 = 영문 대문자 */
.label{
  font-size:12px;color:var(--text-3);
  letter-spacing:.16em;text-transform:uppercase;
}
.label .ko{
  display:block;margin-top:6px;
  letter-spacing:0;text-transform:none;font-size:13px;
}

/* ── header (sticky) ── */
.site-header{
  position:sticky;top:0;z-index:10;
  width:100%;
  padding:20px 0;
  background:var(--bg);
}
.site-header .inner{
  max-width:var(--page);margin:0 auto;padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:baseline;
}
.site-header a{font-size:14px}
.site-header .brand{letter-spacing:.14em;font-size:15px}
.site-header .to-contact{color:var(--text-2);letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.site-header .to-contact:hover{color:var(--text)}

/* ── hero: 400px(이름/역할) + flex:2(제목) ── */
.hero{padding:170px 0 100px;align-items:flex-start}
.hero .side{padding-top:20px}
.hero .who{font-size:15px;letter-spacing:.14em}
.hero .role{font-size:13px;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
.hero .place{font-size:14px;color:var(--text-3);margin-top:10px}
.hero h1{margin-bottom:24px}

/* 한글 키커(H1) + 영문 디스플레이 */
.hero h1.kicker{
  font-size:16px;
  font-weight:380;
  letter-spacing:.18em;
  line-height:150%;
  color:var(--text-2);
  margin:0 0 16px;
}
.display{
  font-family:"Geist","Inter",-apple-system,sans-serif;
  font-weight:400;
  font-size:clamp(30px,4.8vw,58px);
  line-height:112%;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text);
  margin:0 0 30px;
}
.display em{font-style:normal;color:var(--text-2)}

.hero .lede{font-size:19px;line-height:170%;color:var(--text-2);max-width:640px}
.hero .lede strong{color:var(--text);font-weight:380}
.hero-actions{display:flex;gap:24px;margin-top:40px;flex-wrap:wrap}
.hero-actions a{
  font-size:13px;color:var(--text-2);
  letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:4px;
}
.hero-actions a:hover{color:var(--text);border-color:var(--text)}

/* ── work: 400px sticky 텍스트(하단정렬) + flex:2 이미지 ── */
.work-list{display:flex;flex-direction:column;gap:60px;width:100%}
.work-item{
  display:flex;flex-flow:row;gap:10px;width:100%;align-items:stretch;
}
.work-item .text{
  width:var(--side);flex:none;
  position:sticky;top:40px;align-self:stretch;
  display:flex;flex-direction:column;
  justify-content:flex-end;       /* 하단 정렬 */
  align-items:flex-start;
  gap:16px;padding:20px 0 0;
  height:auto;
}
.work-item .shot{flex:2 0 0;width:1px}
.work-item img{
  width:100%;aspect-ratio:1.51;object-fit:cover;border-radius:0;
  filter:grayscale(.12);transition:filter .5s ease;
}
.work-item:hover img{filter:grayscale(0)}
.work-client{font-size:12px;color:var(--text-3);letter-spacing:.14em;text-transform:uppercase}
.work-venue{font-size:15px;color:var(--text-2);margin-top:4px}
.work-title{font-size:29px;letter-spacing:-1.2px;line-height:118%;margin:8px 0 0}
.work-desc{font-size:15px;line-height:170%;color:var(--text-2)}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags span{
  font-size:11px;color:var(--text-3);line-height:1;
  letter-spacing:.08em;
  border:1px solid var(--line);padding:7px 10px;border-radius:2px;
}

/* ── about ── */
.about p{font-size:18px;line-height:175%;color:var(--text-2);margin-bottom:22px;max-width:660px}
.about p:last-child{margin-bottom:0}
.about strong{color:var(--text);font-weight:380}

/* ── row table ── */
.rows{width:100%;border-collapse:collapse}
.rows th{
  text-align:left;font-weight:380;font-size:11px;color:var(--text-3);
  padding:0 0 14px;border-bottom:1px solid var(--line);
  letter-spacing:.14em;text-transform:uppercase;
}
.rows td{
  padding:20px 0;border-bottom:1px solid var(--line-soft);
  font-size:17px;color:var(--text-2);vertical-align:top;
}
.rows td:first-child{color:var(--text);width:34%}
.rows td:last-child{text-align:right;color:var(--text-3);font-size:15px;white-space:nowrap}
.note{font-size:15px;color:var(--text-3);margin-top:20px;max-width:660px}

/* ── faq ── */
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item summary{
  padding:22px 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{color:var(--text);font-weight:380;font-size:18px}
.faq-item summary::after{content:"+";color:var(--text-3);flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--text-2);font-size:16px;line-height:175%;padding:0 0 24px;max-width:660px}

/* ── connect ── */
.connect-rows{display:flex;flex-direction:column;width:100%}
.connect-rows a{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--line-soft);font-size:18px;
}
.connect-rows a span:last-child{color:var(--text-3);font-size:14px;letter-spacing:.04em}
.connect-rows a:hover span:last-child{color:var(--text-2)}
.pending{color:var(--text-3)}

/* ── footer ── */
.site-footer{border-top:1px solid var(--line);padding:40px 0 0;width:100%}
.meta-rows{display:flex;flex-direction:column;gap:12px}
.meta-rows div{display:flex;gap:20px;font-size:15px}
.meta-rows div span:first-child{
  color:var(--text-3);width:150px;flex:none;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.meta-rows div span:last-child{color:var(--text-2)}
.copyright{font-size:12px;color:var(--text-3);margin-top:44px;letter-spacing:.1em}

/* ── 태블릿 이하: 이미지 위 / 텍스트 아래, 2단 해제 ── */
@media (max-width:1279px){
  .row{flex-direction:column;gap:40px}
  .row > .side{width:100%}
  .row > .main{flex:none;width:100%}
  .hero{padding:140px 0 80px}
  .hero .side{padding-top:0}

  .work-item{flex-direction:column;gap:20px}
  .work-item .shot{order:0;width:100%;flex:none}
  .work-item .text{
    order:1;width:100%;position:relative;top:auto;
    padding:0;justify-content:flex-start;
  }
}

@media (max-width:1279px){
  h1{font-size:40px}
}

@media (max-width:809px){
  :root{--pad:16px}
  body{font-size:16px}
  h1{font-size:34px}
  h2{font-size:26px}
  .work-title{font-size:25px}
  .hero .lede{font-size:17px}
  .about p{font-size:17px}
  .faq-item summary h3{font-size:17px}
  .connect-rows a{font-size:17px}
  .rows td{font-size:16px}
  .rows td:last-child{font-size:14px}
  .work-list{gap:50px}
  .page{gap:50px}
  .meta-rows div{flex-direction:column;gap:3px}
  .meta-rows div span:first-child{width:auto}
}