@charset "utf-8";
/* /css/page_story.css : 서비스 현장 기록 */
/* 목록 : 세로 사진 중심 포트폴리오 */
#boxStory .boxStoryList{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1.75rem 1.25rem;}
#boxStory .boxStoryCard{position:relative;display:block;width:100%;height:0;min-width:0;overflow:hidden;padding-top:125%;border-radius:1.25rem;background:#dfe7f0;color:var(--color-white);isolation:isolate;box-shadow:0 .25rem 1rem rgba(15,23,42,.08);text-decoration:none;}
#boxStory .boxStoryCard:after{position:absolute;inset:28% 0 0;z-index:1;background:linear-gradient(180deg,rgba(7,17,31,0),rgba(7,17,31,.24) 30%,rgba(7,17,31,.88) 100%);content:"";pointer-events:none;}
#boxStory .boxStoryThumb{position:absolute;inset:0;display:block;background:linear-gradient(145deg,#e9f1f8,#cad8e6);}
#boxStory .boxStoryThumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .3s ease;}
#boxStory .boxStoryCard:hover .boxStoryThumb img{transform:scale(1.045);}
#boxStory .boxStoryNoImage{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#8da0b5;}
#boxStory .boxStoryNoImage .material-symbols-outlined{font-size:3.5rem;font-weight:200;}
#boxStory .boxStoryInfo{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;min-width:0;padding:1.5rem;flex-direction:column;align-items:flex-start;}
#boxStory .boxStoryTags{display:flex;max-width:100%;margin-bottom:.75rem;align-items:center;gap:.4rem;}
#boxStory .boxStoryService,#boxStory .boxStoryArea{display:inline-flex;max-width:100%;height:1.7rem;padding:0 .7rem;border:1px solid rgba(255,255,255,.36);border-radius:2rem;align-items:center;overflow:hidden;background:rgba(8,20,38,.32);color:#fff;font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap;text-overflow:ellipsis;backdrop-filter:blur(.5rem);-webkit-backdrop-filter:blur(.5rem);}
#boxStory .boxStorySubject{display:-webkit-box;overflow:hidden;color:#fff;font-size:1.22rem;font-weight:600;line-height:1.42;letter-spacing:-.035em;text-shadow:0 1px 6px rgba(0,0,0,.22);word-break:keep-all;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
#boxStory .boxStoryMeta{display:flex;width:100%;margin-top:.75rem;align-items:center;gap:.9rem;color:rgba(255,255,255,.72);font-size:.78rem;font-weight:500;}
#boxStory .boxStoryMeta>*+*{position:relative;}
#boxStory .boxStoryMeta>*+*:before{position:absolute;top:50%;left:-.48rem;width:2px;height:2px;border-radius:50%;background:currentColor;content:"";transform:translateY(-50%);}
#boxStory .boxStoryBranch{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#boxStory .boxStoryDate{flex:none;letter-spacing:.025em;}
#boxStory .boxStoryEmpty{grid-column:1/-1;padding:6rem 1.25rem;border:1px solid var(--color-border);border-radius:1rem;background:var(--color-bg);color:var(--color-text-light);text-align:center;}
#boxStory .boxStoryPaging{display:flex;margin-top:3.25rem;justify-content:center;}

/* 상세 : 에디토리얼 헤더와 사진 갤러리 */
#boxStory .boxStoryBack{display:inline-flex;width:2.75rem;height:2.75rem;margin-bottom:2rem;border:1px solid var(--color-border);border-radius:50%;align-items:center;justify-content:center;background:#fff;color:var(--color-text);box-shadow:0 .2rem .75rem rgba(15,23,42,.05);text-decoration:none;}
#boxStory .boxStoryBack:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateX(-.15rem);}
#boxStory .boxStoryBack .material-symbols-outlined{font-size:1.4rem;}
#boxStory .boxStoryDetail{max-width:70rem;margin:0 auto;}
#boxStory .boxStoryDetailHead{max-width:52rem;margin:0 auto 3rem;text-align:center;}
#boxStory .boxStoryDetailTags{display:flex;margin-bottom:1.1rem;align-items:center;justify-content:center;gap:.5rem;}
#boxStory .boxStoryDetail .boxStoryService,#boxStory .boxStoryDetail .boxStoryArea{height:1.9rem;border-color:var(--color-border);background:var(--color-section);color:var(--color-text-light);font-size:.8rem;backdrop-filter:none;-webkit-backdrop-filter:none;}
#boxStory .boxStoryDetail .boxStoryService{border-color:#cfe1ff;background:#edf5ff;color:var(--color-primary);}
#boxStory .boxStoryDetailTitle{margin:0;color:var(--color-title);font-size:2.15rem;font-weight:600;line-height:1.35;letter-spacing:-.045em;word-break:keep-all;}
#boxStory .boxStoryDetailMeta{display:flex;margin-top:1rem;align-items:center;justify-content:center;gap:1.25rem;color:var(--color-text-light);font-size:.88rem;}
#boxStory .boxStoryDetailMeta>*+*{position:relative;}
#boxStory .boxStoryDetailMeta>*+*:before{position:absolute;top:50%;left:-.65rem;width:2px;height:2px;border-radius:50%;background:var(--color-placeholder);content:"";transform:translateY(-50%);}
#boxStory .boxStoryIntro{position:relative;max-width:52rem;margin:0 auto 4rem;padding:2rem 2.25rem;border-left:.2rem solid var(--color-primary);background:linear-gradient(100deg,#f4f8ff,#fbfdff);color:#475569;font-size:1.05rem;line-height:1.85;letter-spacing:-.015em;word-break:keep-all;}
#boxStory .boxStoryIntro:before{position:absolute;top:-1.15rem;left:1.5rem;color:#c9dcfa;font-family:serif;font-size:4rem;line-height:1;content:"“";}
#boxStory .boxStoryIntro>*{position:relative;}
#boxStory .boxStoryIntro img{max-width:100%;height:auto;}
#boxStory .boxStoryDetailImages{column-count:2;column-gap:1.5rem;}
#boxStory .boxStoryDetailImage{display:inline-block;width:100%;margin:0 0 1.5rem;overflow:hidden;break-inside:avoid;border-radius:1rem;background:#fff;box-shadow:0 .4rem 1.5rem rgba(15,23,42,.09);text-align:left;}
#boxStory .boxStoryDetailImage img{display:block;width:100%;height:auto;}
#boxStory .boxStoryDetailImage figcaption{padding:1.1rem 1.25rem 1.25rem;border-top:1px solid var(--color-border-light);color:var(--color-text-light);font-size:.92rem;line-height:1.7;word-break:keep-all;}
#boxStory .boxStoryFoot{margin-top:4rem;text-align:center;}
#boxStory .boxStoryListButton{display:inline-flex;min-width:10rem;height:3.5rem;border-radius:.35rem;align-items:center;justify-content:center;background:var(--color-title);color:#fff;font-size:1rem;font-weight:600;text-decoration:none;}
#boxStory .boxStoryListButton:hover{background:var(--color-primary);transform:translateY(-1px);box-shadow:0 .5rem 1.25rem rgba(37,99,235,.2);}
#boxStory .boxStoryNotFound{padding:6rem 1.25rem;text-align:center;}
#boxStory .boxStoryNotFound p{margin-bottom:1.5rem;color:var(--color-text-light);}

@media(max-width:1200px){
	#boxStory{padding:3.5rem 0 !important;}
    #boxStory .boxStoryList{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
	#boxStory .boxStoryList{width:100% !important;margin-right:0 !important;margin-left:0 !important;padding-right:0 !important;padding-left:0 !important;box-sizing:border-box;}
}

@media(max-width:900px){
	#boxStory{padding:2.5rem 0 !important;}
    #boxStory .boxStoryList{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1rem !important;}
}

@media(max-width:768px){
	#boxStory{padding:1.5rem 0 !important;}
    #boxStory .boxStoryList{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.25rem !important;}
    #boxStory .boxStoryCard{border-radius:0;box-shadow:0;}
    #boxStory .boxStoryInfo{padding:.85rem .75rem;}
    #boxStory .boxStoryTags{width:100%;margin-bottom:.45rem;gap:.25rem;}
    #boxStory .boxStoryService,#boxStory .boxStoryArea{min-width:0;height:1.25rem;padding:0 .4rem;border-color:rgba(255,255,255,.3);font-size:.62rem;}
    #boxStory .boxStorySubject{font-size:.86rem;line-height:1.38;}
    #boxStory .boxStoryMeta{margin-top:.45rem;gap:.65rem;font-size:.62rem;}
    #boxStory .boxStoryMeta>*+*:before{left:-.35rem;}
    #boxStory .boxStoryEmpty{padding:4rem 1rem;}
    #boxStory .boxStoryPaging{margin-top:2.25rem;}
    #boxStory .boxStoryBack{width:2.5rem;height:2.5rem;margin-bottom:1.5rem;}
    #boxStory .boxStoryDetailHead{margin-bottom:2rem;}
    #boxStory .boxStoryDetailTags{margin-bottom:.75rem;}
    #boxStory .boxStoryDetail .boxStoryService,#boxStory .boxStoryDetail .boxStoryArea{height:1.55rem;padding:0 .55rem;font-size:.7rem;}
    #boxStory .boxStoryDetailTitle{font-size:1.5rem;}
    #boxStory .boxStoryDetailMeta{margin-top:.7rem;font-size:.75rem;}
    #boxStory .boxStoryIntro{margin-bottom:2.5rem;padding:1.5rem 1.25rem 1.4rem;font-size:.92rem;line-height:1.75;}
    #boxStory .boxStoryIntro:before{top:-.8rem;left:.8rem;font-size:3.2rem;}
    #boxStory .boxStoryDetailImages{column-count:1;}
    #boxStory .boxStoryDetailImage{margin-bottom:1.25rem;border-radius:0;box-shadow:none;}
    #boxStory .boxStoryDetailImage figcaption{padding:.9rem 1rem 1rem;font-size:.82rem;}
    #boxStory .boxStoryFoot{margin-top:2.5rem;}
}

@media(prefers-reduced-motion:reduce){
    #boxStory .boxStoryThumb img,#boxStory .boxStoryBack,#boxStory .boxStoryListButton{transition:none;}
}