/* === Ttobagi Portfolio — Scoped Reset === */
#ttbg-wrap,#ttbg-wrap *,#ttbg-wrap *::before,#ttbg-wrap *::after,
.ttbg-modal-backdrop,.ttbg-modal-backdrop *,.ttbg-modal-backdrop *::before,.ttbg-modal-backdrop *::after{margin:0;padding:0;box-sizing:border-box}
#ttbg-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Noto Sans KR',sans-serif;font-size:16px;color:#0a0a0a;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff}
#ttbg-wrap img{display:block;max-width:100%;border:none;box-shadow:none}
#ttbg-wrap button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:1rem;font-weight:500;line-height:1.5;letter-spacing:0;text-transform:none;border-radius:0;padding:0}

/* === Filter Bar === */
#ttbg-wrap .ttbg-filter-bar{padding:2rem 1.5rem;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
#ttbg-wrap .ttbg-filter-bar__inner{max-width:80rem;margin:0 auto}
#ttbg-wrap .ttbg-filter-bar__list{display:flex;flex-wrap:wrap;gap:.75rem}
#ttbg-wrap .ttbg-filter-btn{padding:.625rem 1.5rem;border:1px solid #d1d5db;background:transparent;color:#374151;font-size:1rem;font-weight:500;line-height:1.5;transition:background-color .2s,border-color .2s,color .2s;border-radius:0}
#ttbg-wrap .ttbg-filter-btn:hover{border-color:#002D5D}
#ttbg-wrap .ttbg-filter-btn--active{background:#002D5D;color:#fff;border-color:#002D5D}

/* === Featured === */
#ttbg-wrap .ttbg-featured{padding:5rem 1.5rem;max-width:80rem;margin:0 auto}
#ttbg-wrap .ttbg-featured__grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
#ttbg-wrap .ttbg-featured__title{font-size:1.875rem;font-weight:500;line-height:1.25;margin-bottom:2rem;color:#0a0a0a}
#ttbg-wrap .ttbg-featured__details{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2.5rem}
#ttbg-wrap .ttbg-featured__detail-item{border-left:2px solid #002D5D;padding-left:1.5rem}
#ttbg-wrap .ttbg-featured__detail-label{font-size:.875rem;color:#6b7280;margin-bottom:.25rem;font-weight:400;line-height:1.5}
#ttbg-wrap .ttbg-featured__detail-value{font-size:1.125rem;color:#0a0a0a;font-weight:400;line-height:1.5}
#ttbg-wrap .ttbg-featured__link{display:inline-flex;align-items:center;gap:.5rem;color:#002D5D;text-decoration:none;transition:gap .3s;padding:0}
#ttbg-wrap .ttbg-featured__link:hover{gap:1rem}
#ttbg-wrap .ttbg-featured__link-text{font-size:.875rem;letter-spacing:.05em;font-weight:500}
#ttbg-wrap .ttbg-featured__link-icon{width:1rem;height:1rem;display:flex;align-items:center}
#ttbg-wrap .ttbg-featured__link-icon svg{width:100%;height:100%}
#ttbg-wrap .ttbg-featured__image-wrapper{position:relative;aspect-ratio:4/3;overflow:hidden}
#ttbg-wrap .ttbg-featured__image-wrapper::after{content:'';position:absolute;inset:0;background:#fff;transform-origin:right;transform:scaleX(1);transition:transform 1.1s cubic-bezier(.16,1,.3,1) .3s;z-index:2}
#ttbg-wrap .ttbg-featured__image-wrapper.ttbg-is-visible::after{transform:scaleX(0)}
#ttbg-wrap .ttbg-featured__image{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}

/* === Portfolio Grid === */
#ttbg-wrap .ttbg-portfolio{padding:5rem 1.5rem;max-width:80rem;margin:0 auto}
#ttbg-wrap .ttbg-portfolio__grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
#ttbg-wrap .ttbg-portfolio__item{position:relative;overflow:hidden;cursor:pointer}
#ttbg-wrap .ttbg-portfolio__aspect{position:relative;overflow:hidden}
#ttbg-wrap .ttbg-portfolio__aspect--wide{aspect-ratio:16/10}
#ttbg-wrap .ttbg-portfolio__aspect--standard{aspect-ratio:4/3}
#ttbg-wrap .ttbg-portfolio__img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease-out}
#ttbg-wrap .ttbg-portfolio__item:hover .ttbg-portfolio__img{transform:scale(1.05)}
#ttbg-wrap .ttbg-portfolio__overlay{position:absolute;inset:0;background:#002D5D;display:flex;align-items:flex-end;padding:2rem;opacity:0;transition:opacity .3s}
#ttbg-wrap .ttbg-portfolio__item:hover .ttbg-portfolio__overlay{opacity:.92}
#ttbg-wrap .ttbg-portfolio__overlay-content{color:#fff;opacity:0;transform:translateY(16px);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
#ttbg-wrap .ttbg-portfolio__item:hover .ttbg-portfolio__overlay-content{opacity:1;transform:translateY(0)}
#ttbg-wrap .ttbg-portfolio__category{font-size:.75rem;letter-spacing:.15em;margin-bottom:.75rem;opacity:.7;text-transform:uppercase;font-weight:400;line-height:1.5}
#ttbg-wrap .ttbg-portfolio__item-title{font-size:1.5rem;font-weight:500;margin-bottom:.5rem;line-height:1.3;color:#fff}
#ttbg-wrap .ttbg-portfolio__item-desc{font-size:.875rem;opacity:.9;font-weight:400;line-height:1.5}

/* === Animations === */
#ttbg-wrap .ttbg-reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
#ttbg-wrap .ttbg-reveal.ttbg-is-visible{opacity:1;transform:translateY(0)}
#ttbg-wrap .ttbg-reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
#ttbg-wrap .ttbg-reveal-left.ttbg-is-visible{opacity:1;transform:translateX(0)}
#ttbg-wrap .ttbg-reveal-scale{opacity:0;transform:scale(.92);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
#ttbg-wrap .ttbg-reveal-scale.ttbg-is-visible{opacity:1;transform:scale(1)}
#ttbg-wrap .ttbg-filter-btn{opacity:0;transform:translateY(12px)}
#ttbg-wrap .ttbg-filter-btn.ttbg-is-visible{opacity:1;transform:translateY(0);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),background-color .2s,border-color .2s,color .2s}
#ttbg-wrap .ttbg-featured__text,#ttbg-wrap .ttbg-featured__image-wrapper{transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
#ttbg-wrap .ttbg-featured__text.ttbg-is-swapping{opacity:0;transform:translateX(-30px)}
#ttbg-wrap .ttbg-featured__image-wrapper.ttbg-is-swapping{opacity:0;transform:scale(.96)}
#ttbg-wrap .ttbg-featured__image-wrapper.ttbg-is-swapping::after{transform:scaleX(1)}

/* === Modal === */
.ttbg-modal-backdrop{position:fixed;inset:0;z-index:999999;background:rgba(0,15,30,0);backdrop-filter:blur(0);display:flex;align-items:center;justify-content:center;padding:1.5rem;pointer-events:none;transition:background .4s cubic-bezier(.16,1,.3,1),backdrop-filter .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Noto Sans KR',sans-serif;font-size:16px;line-height:1.5;color:#0a0a0a}
.ttbg-modal-backdrop.ttbg-is-open{background:rgba(0,15,30,.6);backdrop-filter:blur(8px);pointer-events:auto}
.ttbg-modal{position:relative;background:#fff;max-width:64rem;width:100%;max-height:calc(100vh - 3rem);overflow-y:auto;opacity:0;transform:translateY(40px) scale(.97);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);border-radius:0;box-shadow:none}
.ttbg-modal-backdrop.ttbg-is-open .ttbg-modal{opacity:1;transform:translateY(0) scale(1)}
.ttbg-modal__close{position:absolute;top:1.25rem;right:1.25rem;z-index:10;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e5e7eb !important;cursor:pointer;transition:background-color .2s,border-color .2s;padding:0;border-radius:0}
.ttbg-modal__close:hover{background:#f3f4f6;border-color:#002D5D !important}
.ttbg-modal__close svg{width:1.125rem;height:1.125rem;color:#0a0a0a}
.ttbg-modal__image-wrapper{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative}
.ttbg-modal__image{width:100%;height:100%;object-fit:cover}
.ttbg-modal__category-badge{position:absolute;bottom:1.25rem;left:1.5rem;background:#002D5D;color:#fff;font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.375rem 1rem;line-height:1.5;border-radius:0}
.ttbg-modal__body{padding:2.5rem 2rem 3rem}
.ttbg-modal__title{font-size:1.75rem;font-weight:500;line-height:1.25;margin-bottom:.75rem;color:#0a0a0a}
.ttbg-modal__desc{font-size:1rem;color:#6b7280;line-height:1.6;margin-bottom:2rem}
.ttbg-modal__divider{width:100%;height:1px;background:#e5e7eb;margin-bottom:2rem}
.ttbg-modal__details-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2.5rem}
.ttbg-modal__detail-card{border-left:2px solid #002D5D;padding-left:1.25rem}
.ttbg-modal__detail-label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#002D5D;margin-bottom:.25rem;font-weight:500;line-height:1.5}
.ttbg-modal__detail-value{font-size:1.0625rem;color:#0a0a0a;font-weight:400;line-height:1.5}
.ttbg-modal__highlights{background:#f8f9fb;padding:1.5rem;margin-bottom:2rem;border-radius:0}
.ttbg-modal__highlights-title{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#002D5D;font-weight:500;margin-bottom:1rem;line-height:1.5}
.ttbg-modal__highlights-list{list-style:none;display:flex;flex-direction:column;gap:.625rem;margin:0;padding:0}
.ttbg-modal__highlights-list li{font-size:.9375rem;color:#374151;line-height:1.6;padding-left:1.25rem;position:relative}
.ttbg-modal__highlights-list li::before{content:'';position:absolute;left:0;top:.625rem;width:5px;height:5px;background:#002D5D;border-radius:50%}
.ttbg-modal__footer{display:flex;justify-content:flex-end}
.ttbg-modal__contact-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;background:#002D5D;color:#fff;font-size:.9375rem;font-weight:500;border:none !important;cursor:pointer;transition:background-color .2s,gap .3s;line-height:1.5;border-radius:0}
.ttbg-modal__contact-btn:hover{background:#00244a;gap:.75rem}
.ttbg-modal__contact-btn svg{width:1rem;height:1rem}
body.ttbg-modal-open{overflow:hidden !important}

/* === Responsive md === */
@media(min-width:768px){
#ttbg-wrap .ttbg-featured{padding:8rem 1.5rem}
#ttbg-wrap .ttbg-featured__grid{grid-template-columns:1fr 1fr;gap:4rem}
#ttbg-wrap .ttbg-featured__title{font-size:3rem}
#ttbg-wrap .ttbg-portfolio__grid{grid-template-columns:repeat(12,1fr)}
#ttbg-wrap .ttbg-portfolio__item--span7{grid-column:span 7}
#ttbg-wrap .ttbg-portfolio__item--span5{grid-column:span 5}
#ttbg-wrap .ttbg-portfolio__item--span6{grid-column:span 6}
#ttbg-wrap .ttbg-portfolio__item-title{font-size:1.875rem}
.ttbg-modal__body{padding:3rem 3rem 3.5rem}
.ttbg-modal__title{font-size:2.25rem}
.ttbg-modal__details-grid{grid-template-columns:1fr 1fr 1fr}
.ttbg-modal__close{top:1.5rem;right:1.5rem}
}