/*
Theme Name: Studio Momento
Theme URI: https://studiomomento.kr/
Author: Studio Momento
Description: 승인된 Studio Momento 단일 화면 포트폴리오 시안을 WordPress로 옮긴 전용 테마입니다.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: studio-momento
*/

:root{--ink:#151719;--white:#fff;--muted:#6e7880;--line:#d9e1e7;--blue:#dfeaf2;--serif:'Cormorant Garamond','Noto Serif KR',serif;--sans:'Montserrat',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff;color:var(--ink);font-family:var(--sans)}button,a{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}a{text-decoration:none}.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:82px;padding:0 clamp(24px,5vw,76px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(255,255,255,.87);border-bottom:1px solid rgba(217,225,231,.7);backdrop-filter:blur(16px)}.brand{grid-column:2;padding:0}.brand img{display:block;width:150px}.nav{display:flex;align-items:center;gap:clamp(20px,3vw,48px)}.nav button,.nav a{padding:8px 0;font-size:9px;letter-spacing:.17em;text-transform:uppercase;position:relative}.nav button:after,.nav a:after{content:'';position:absolute;left:0;bottom:3px;width:0;height:1px;background:#8fb2ca;transition:.3s}.nav button:hover:after,.nav a:hover:after,.nav button.active:after{width:100%}.nav-left{grid-column:1;grid-row:1}.nav-right{grid-column:3;grid-row:1;justify-content:flex-end}.menu-toggle{display:none}.screen-shell{position:relative;width:100%;height:100svh}.screen{position:absolute;inset:0;padding-top:82px;opacity:0;visibility:hidden;transform:scale(1.01);transition:opacity .55s ease,transform .8s ease,visibility .55s;overflow:hidden}.screen.active{opacity:1;visibility:visible;transform:none}.placeholder{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#f4f7f9,#dfeaf2 50%,#f8fafb);color:#7e929f}.placeholder:before{content:attr(data-number);position:absolute;top:20px;left:22px;z-index:2;font-size:9px;letter-spacing:.22em}.placeholder:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 49.9%,rgba(120,150,171,.18) 50%,transparent 50.1%)}.placeholder span{font:400 clamp(30px,5vw,66px)/1 var(--serif);letter-spacing:.08em}.full-photo{position:absolute;top:82px;right:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px);left:clamp(16px,2vw,32px)}.featured-link{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;gap:9px;align-items:center;text-transform:uppercase}.featured-link span{font-size:8px;letter-spacing:.22em}.featured-link strong{font-size:10px;letter-spacing:.12em;border-bottom:1px solid;padding-bottom:5px}.screen-heading{position:absolute;left:6vw;top:16vh}.screen-heading p,.eyebrow,.gallery header p{margin:0 0 12px;font-size:9px;letter-spacing:.22em;color:var(--muted)}.screen-heading h1,.about h1,.contact h1{margin:0;font:400 clamp(48px,6vw,86px)/.9 var(--serif);letter-spacing:-.025em}.portfolio-list{position:absolute;left:6vw;right:6vw;bottom:6vh;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px)}.work{padding:0;text-align:left}.work .placeholder{aspect-ratio:4/5;transition:transform .45s,box-shadow .45s}.work:hover .placeholder{transform:translateY(-7px);box-shadow:0 20px 50px rgba(78,107,126,.12)}.work p{display:flex;justify-content:space-between;align-items:baseline;margin:13px 0 0}.work strong{font:400 22px/1 var(--serif)}.work small{font-size:8px;letter-spacing:.14em;color:var(--muted)}.about{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;align-items:center;padding:12vh 9vw 7vh}.about-photo{height:68vh}.about-copy{max-width:560px}.about h1{font-family:'Noto Serif KR',serif;font-size:clamp(34px,4vw,58px);line-height:1.35;margin-bottom:32px}.about-copy>p:not(.eyebrow){font:300 14px/2.05 'Noto Serif KR',serif;color:var(--muted)}.about-copy .english{font:400 25px/1.25 var(--serif)!important;margin-top:28px}.process-panel{position:absolute;z-index:2;right:9vw;top:50%;transform:translateY(-45%);width:min(420px,40vw);padding:50px 56px;background:rgba(255,255,255,.9);backdrop-filter:blur(15px)}.process-panel ol{list-style:none;margin:0;padding:0}.process-panel li{display:flex;gap:36px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}.process-panel li span{font-size:9px;letter-spacing:.16em;color:#7ca6c2}.process-panel li strong{font:400 27px/1 var(--serif)}.contact-card{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-43%);width:min(500px,calc(100% - 44px));padding:58px;text-align:center;background:rgba(255,255,255,.9);backdrop-filter:blur(15px)}.contact h1{font-size:clamp(52px,6vw,78px);margin-bottom:32px}.contact-card a{display:block;margin:12px 0;font-size:9px;letter-spacing:.11em}.gallery{position:fixed;z-index:100;inset:0;padding:34px clamp(22px,4vw,60px) 60px;background:#fff;overflow:auto;opacity:0;visibility:hidden;transform:translateX(18px);transition:.45s}.gallery.active{opacity:1;visibility:visible;transform:none}.gallery header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:42px}.gallery-close{padding:0 0 5px;border-bottom:1px solid;font-size:9px;letter-spacing:.17em}.gallery h2{margin:0;font:400 56px/1 var(--serif)}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.gallery-grid .placeholder{aspect-ratio:4/5}.gallery-grid .placeholder:nth-child(2n){aspect-ratio:4/3}
@media(max-width:800px){.site-header{height:70px;padding:0 19px}.brand img{width:118px}.menu-toggle{display:flex;grid-column:1;grid-row:1;width:30px;height:24px;padding:5px 0;flex-direction:column;justify-content:space-between}.menu-toggle span{display:block;width:24px;height:1px;background:var(--ink);transition:.3s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(6.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-6.5px) rotate(-45deg)}.nav-left{position:fixed;z-index:-1;inset:70px 0 auto;height:calc(100svh - 70px);padding:58px 26px;background:rgba(255,255,255,.98);display:flex;flex-direction:column;align-items:flex-start;gap:30px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.4s}.nav-left.open{opacity:1;visibility:visible;transform:none}.nav-left button{font:400 34px/1 var(--serif);letter-spacing:0;text-transform:none}.nav-right{grid-column:3}.nav-right button{font-size:0}.nav-right button:before{content:'CONTACT';font-size:8px}.nav-right a{display:none}.screen{padding-top:70px}.full-photo{top:70px;inset-inline:0;bottom:0}.portfolio{overflow:auto}.screen-heading{position:relative;left:auto;top:auto;padding:55px 22px 42px}.screen-heading h1{font-size:52px}.portfolio-list{position:relative;left:auto;right:auto;bottom:auto;display:block;padding:0 22px 60px}.work{display:block;width:100%;margin-bottom:52px}.work .placeholder{aspect-ratio:4/5}.about{display:block;padding:100px 22px 50px;overflow:auto}.about-photo{height:auto;aspect-ratio:4/5;margin-bottom:55px}.about h1{font-size:35px}.process-panel{left:20px;right:20px;top:50%;width:auto;padding:36px 28px}.process-panel li strong{font-size:24px}.contact-card{padding:46px 22px}.contact h1{font-size:55px}.gallery{padding:26px 20px 55px}.gallery h2{font-size:44px}.gallery-grid{grid-template-columns:1fr}.gallery-grid .placeholder,.gallery-grid .placeholder:nth-child(2n){aspect-ratio:4/5}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
.process-panel{right:6vw;top:calc(82px + 4vh);bottom:4vh;transform:none;width:min(620px,48vw);padding:42px 48px;overflow:auto}.process-panel>h1{margin:0 0 24px;font:400 clamp(35px,3.5vw,52px)/.95 var(--serif);letter-spacing:-.02em}.process-panel ol{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.process-panel li{gap:18px;padding:14px 16px;border-right:1px solid var(--line)}.process-panel li span{font-size:8px}.process-panel li strong{font-size:20px}.pricing{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.price-card{padding:20px;border:1px solid var(--line);background:#fff}.price-card.featured{background:#eef5f9;border-color:#cbdde9}.price-card>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px}.price-card p{margin:0;font-size:7px;letter-spacing:.18em;color:var(--muted)}.price-card strong{font:400 27px/1 var(--serif)}.price-card>span{display:block;margin:14px 0;color:#739ab5;font-size:7px;letter-spacing:.12em}.price-card ul{list-style:none;margin:0;padding:13px 0 0;border-top:1px solid var(--line)}.price-card li{display:block;padding:4px 0;border:0;font:300 10px/1.6 'Noto Serif KR',serif;color:var(--muted)}
@media(max-width:800px){.nav-left button{font-size:32px;text-align:left}.process{overflow:auto;background:rgba(238,245,249,.72)}.process .process-photo{position:fixed}.process-panel{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:calc(100% - 32px);margin:28px 16px;padding:34px 22px;overflow:visible}.process-panel>h1{font-size:38px}.process-panel ol{grid-template-columns:1fr}.process-panel li strong{font-size:22px}.pricing{grid-template-columns:1fr}.price-card{padding:22px}}

/* 상단 중앙 홈 로고 */
.brand{position:absolute;grid-column:auto;grid-row:auto;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px;line-height:0}
.brand img{height:auto}
.brand:focus-visible{outline:1px solid #8fb2ca;outline-offset:4px}

/* 카테고리 없이 이어지는 단일 포트폴리오 갤러리 */
.screen{transform:translateY(4px)}
.portfolio{overflow:auto}
.portfolio .screen-heading{z-index:2;pointer-events:none}
.portfolio-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px);padding:34vh 6vw 8vh}
.portfolio-gallery .placeholder{aspect-ratio:4/5}
.portfolio-gallery .placeholder:nth-child(3n+2){aspect-ratio:4/3;align-self:center}

@media(max-width:800px){
  .portfolio-gallery{display:block;padding:0 22px 60px}
  .portfolio-gallery .placeholder,.portfolio-gallery .placeholder:nth-child(3n+2){aspect-ratio:4/5;margin-bottom:22px}
}

/* 로그인 중에도 워드프레스 관리 도구막대가 시안을 가리지 않도록 보정 */
.admin-bar .site-header{top:32px}
.admin-bar .screen-shell{height:calc(100svh - 32px);margin-top:32px}
@media(max-width:782px){
  .admin-bar .site-header{top:46px}
  .admin-bar .screen-shell{height:calc(100svh - 46px);margin-top:46px}
}