/* 변호철학 페이지(/ABOUT/) — 원본 content/pages/about.html, 생성 yksite build_about. 아임웹 /ABOUT 를 PC 1440·휴대폰 390 에서 재서 맞춤(2026-11-05). */
.philo{--gut:max(24px,env(safe-area-inset-left,0px));--gut-r:max(24px,env(safe-area-inset-right,0px));--nav:0px;font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased}
:where(.philo) img{display:block;max-width:100%}
:where(.philo) a{color:inherit;text-decoration:none}
@media (prefers-reduced-motion:reduce){.ph-fx .ph-fade{opacity:1!important;transform:none!important;transition:none!important}}
/* 2 변호철학 — 아임웹 /ABOUT 와 똑같이. 제목 글꼴은 아임웹과 같은 조선일보명조. 서명 '유익상'은 아임웹 글꼴(나눔손글씨 북극성, 3.5MB)로 그린 그림 sign.png */
@font-face{font-family:"ChosunIlboMyungjo";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff") format("woff");font-weight:400;font-display:swap}
.philo{background:#fbf9f8;--ph-ink:#34312c;--ph-tan:#cfa175;background:#fbf9f8;color:var(--ph-ink);letter-spacing:0;scroll-margin-top:var(--nav)}
:where(.philo) :where(p,h1,h2,h3,ul){margin:0}
.philo .ph-m{display:none}
.ph-head{text-align:center;padding:130px var(--gut-r) 89px var(--gut)}
.ph-eng{font-size:20px;line-height:24px;font-weight:700;color:var(--ph-tan)}
.ph-title{margin-top:14px;font-size:48px;line-height:57.6px;font-weight:700;letter-spacing:0}
.ph-strip{height:297px;background:#e9e1d7 url("/assets/yk/philosophy/head.jpg") 50% 50%/cover no-repeat fixed}
.ph-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ph-img{overflow:hidden;border-radius:30px;background:#ece7e1}
.ph-img picture{display:block;width:100%;height:100%}
.ph-in{max-width:1280px;margin:0 auto;padding:0}
.ph-h{font-family:"ChosunIlboMyungjo","Nanum Myeongjo",serif;font-size:42px;line-height:63px;font-weight:400;letter-spacing:0}
.ph-text p,.ph-center p{font-size:22px;line-height:36.8px}
.ph-text p+p,.ph-center p+p{margin-top:36.8px}
.ph-row{display:grid;align-items:center;column-gap:60px}
.ph-row1{grid-template-columns:minmax(0,687fr) minmax(0,533fr);margin-top:127px}
.ph-row1 .ph-text{text-align:right;align-self:start;padding-top:43px}
.ph-row1 .ph-h{margin-bottom:34px}
.ph-sil{aspect-ratio:533/690}
.ph-row2{grid-template-columns:minmax(0,640fr) minmax(0,580fr);margin-top:100px}
.ph-row2 .ph-h{margin-bottom:34px}
.ph-por{aspect-ratio:640/595}
.ph-list{text-align:center;margin-top:152px}
.ph-list li{font-size:26px;line-height:31.2px}
.ph-list li+li{margin-top:32.8px}
.ph-strong{margin-top:75px;font-size:30px;line-height:52px;font-weight:700}
.ph-quote{text-align:center;margin-top:139px}
.ph-lead{font-size:22px;line-height:26.4px}
.ph-quote .ph-h{margin-top:18px}
.ph-wide{aspect-ratio:1280/409}
.ph-quote+.ph-wide{margin-top:60px}
.ph-center{text-align:center}
.ph-c1{margin-top:97px}
.ph-c1 .ph-h{margin-bottom:21px}
.ph-center+.ph-wide{margin-top:104px}
.ph-c2{margin-top:73px}
.ph-c2 .ph-h{margin-bottom:33px}
.ph-banner{position:relative;margin-top:122px;height:509px;background:#f3e4c5 url("/assets/yk/philosophy/banner.jpg") 100% 50%/cover no-repeat}
.ph-banner-in{max-width:1280px;margin:0 auto;padding:106px 15px 0}
.ph-close{font-size:48px;line-height:57.6px;font-weight:700}
.ph-sign{margin-top:56px;display:flex;align-items:center;gap:13px}
.ph-sign span{font-size:24px;line-height:28.8px;letter-spacing:-1px}
.ph-sign img{width:99px;height:auto}
.ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:30px;width:235px;height:63px;border:2px solid var(--ph-tan);border-radius:9px;font-size:20px;font-weight:600;color:#b98c61;transition:background .2s,color .2s}
.ph-btn:hover{background:var(--ph-tan);color:#fff}
/* 스크롤로 들어올 때 살짝 올라오며 나타남 (아임웹 페이지와 같은 느낌) */
.ph-fx .ph-fade{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.ph-fx .ph-fade.is-in{opacity:1;transform:none}
@media (max-width:1320px){
  .ph-in{padding:0 var(--gut-r) 0 var(--gut)}
  .ph-h{font-size:clamp(28px,2.92vw,42px);line-height:1.5}
  .ph-text p,.ph-center p{font-size:clamp(16px,1.53vw,22px);line-height:1.68}
  .ph-text p+p,.ph-center p+p{margin-top:1.68em}
}
@media (max-width:767px){
  .philo .ph-m{display:inline}.philo br.ph-m{display:initial}.philo .ph-pc{display:none}
  .ph-head{padding:60px 15px 26px}
  .ph-eng{font-size:12px;line-height:18px}
  .ph-title{margin-top:10px;font-size:24px;line-height:28.8px}
  .ph-strip{height:130px;background-attachment:scroll}
  .ph-in{padding:0 15px}
  .ph-img{border-radius:15px}
  .ph-wide{border-radius:10px;aspect-ratio:360/130}
  .ph-row{grid-template-columns:minmax(0,1fr)!important;row-gap:30px}
  .ph-row1{margin-top:40px}
  .ph-row1 .ph-text{text-align:center;padding-top:0}
  .ph-row1 .ph-img{order:-1}
  .ph-sil,.ph-por{aspect-ratio:360/130}
  .ph-row2{margin-top:47px}
  .ph-row2 .ph-text{text-align:center}
  .ph-h{font-size:22px;line-height:32px}
  .ph-row1 .ph-h,.ph-row2 .ph-h{margin-bottom:19px}
  .ph-text p,.ph-center p{font-size:13px;line-height:21px}
  .ph-text p+p,.ph-center p+p{margin-top:20px}
  .ph-row2 .ph-text p{font-size:14px;line-height:20.5px}
  .ph-list{margin-top:92px}
  .ph-list li{font-size:16px;line-height:19px}
  .ph-list li+li{margin-top:21px}
  .ph-strong{margin-top:19px;font-size:16px;line-height:32px}
  .ph-quote{margin-top:66px}
  .ph-lead{font-size:13px;line-height:19.5px}
  .ph-quote .ph-h{margin-top:15px;font-size:24px;line-height:28.8px}
  .ph-quote+.ph-wide{margin-top:26px}
  .ph-c1{margin-top:31px}
  .ph-c1 .ph-h,.ph-c2 .ph-h{margin-bottom:19px}
  .ph-center+.ph-wide{margin-top:36px}
  .ph-c2{margin-top:31px}
  .ph-banner{margin-top:44px;height:auto;min-height:476px;background:#eedfc0}
  .ph-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:91vw;max-height:420px;background:url("/assets/yk/philosophy/banner-m.jpg") 50% 100%/cover no-repeat}
  .ph-banner-in{position:relative;z-index:1;padding:47px 15px 0;text-align:center;height:calc(121px + 91vw)}
  .ph-close{font-size:26px;line-height:32px}
  .ph-sign{justify-content:center;margin-top:12px;gap:8px}
  .ph-sign span{font-size:16px;line-height:24px}
  .ph-sign img{width:54px}
  .ph-btn{width:278px;height:44px;margin-top:20px;border:1px solid var(--ph-tan);border-radius:8px;background:var(--ph-tan);color:#fff;font-size:14px;font-weight:700}
}