@charset "utf-8";
/* =========================================================
   대양씨아이에스 — 구축사례 (example.css)
   ---------------------------------------------------------
   · 사용 페이지 : example_list.php (목록) / example_view.php (상세)
   · 불러오는 순서 : common.css → sub.css → example.css
   · 접두사 : .ex-
   ========================================================= */

/* ---------- 공통 : 솔루션 / 적용분야 태그 ----------
   솔루션 = 채운 알약, 적용분야 = 테두리 알약 으로 구분합니다. */
.t-sol,.t-det,.t-sec{
  display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;
}

/* =========================================================
   목록 : 필터
   ========================================================= */
.ex-filter{
  margin-top:clamp(18px,2vw,26px);
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.8vw,36px);
  border:1px solid var(--line);border-radius:20px;background:#fff;
}
.ex-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:start}
.ex-row+.ex-row{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.ex-lb{
  padding-top:9px;font-size:15px;font-weight:700;letter-spacing:-.03em;color:var(--navy);
}
.ex-chips{display:flex;flex-wrap:wrap;gap:8px}
.ex-chip{position:relative;cursor:pointer}
.ex-chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.ex-chip span{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 17px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  font-size:14.5px;font-weight:600;letter-spacing:-.03em;color:var(--ink-70);
  transition:border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);
}
.ex-chip:hover span{border-color:#C3CFF0;color:var(--navy)}
.ex-chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
/* 선택된 칩 앞에 체크 표시 */
.ex-chip input:checked+span::before{
  content:'';width:10px;height:6px;margin:-3px 1px 0 -2px;
  border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg);
}
.ex-chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}

.ex-search{display:flex;flex-wrap:wrap;gap:8px}
.ex-search input{
  flex:1 1 280px;max-width:460px;height:44px;padding:0 16px;border-radius:12px;
  border:1px solid var(--line);background:#fff;font:inherit;font-size:15px;color:var(--ink);
}
.ex-search input::placeholder{color:var(--ink-30)}
.ex-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,48,201,.10)}
.ex-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:15px;font-weight:600;color:var(--ink-70);cursor:pointer;
  transition:.18s var(--ease);
}
.ex-btn svg{width:16px;height:16px}
.ex-btn:hover{border-color:var(--ink-50);color:var(--ink)}
.ex-btn.solid{background:var(--navy);border-color:var(--navy);color:#fff;min-width:88px}
.ex-btn.solid:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* 결과 개수 + 솔루션 상세 조건 */
.ex-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  margin:clamp(28px,3vw,40px) 0 16px;
}
.ex-count{margin:0;font-size:15px;color:var(--ink-50)}
.ex-count b{margin-left:4px;font-size:17px;font-weight:800;color:var(--ink)}
.ex-detail{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  height:36px;padding:0 6px 0 14px;border-radius:999px;background:var(--mist-2);
  font-size:14px;color:var(--ink-50);
}
.ex-detail b{color:var(--blue);font-weight:700}
.ex-detail button{
  display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;
  background:#fff;color:var(--ink-50);cursor:pointer;
}
.ex-detail button:hover{color:var(--ink)}
.ex-detail button svg{width:12px;height:12px}

/* =========================================================
   목록 : 벤또 그리드
   ---------------------------------------------------------
   PC 4열. 8개 한 묶음 = 큰 블록(2×2) + 세로 블록(1×2) + 작은 블록 6개
   → 빈칸 없이 3줄을 채우고, 묶음마다 좌우를 바꿉니다(is-flip).
   ========================================================= */
.ex-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(190px,17.5vw,240px);grid-auto-flow:row dense;
  gap:clamp(12px,1.3vw,18px);
}
.ex-card{position:relative;min-width:0}
.ex-card[hidden]{display:none}
.ex-card.is-big{grid-column:span 2;grid-row:span 2}
.ex-card.is-tall{grid-row:span 2}
.ex-card.is-wide{grid-column:span 2}
.ex-card.is-big.is-flip{grid-column:3 / span 2}
.ex-card.is-tall.is-flip{grid-column:2}

.ex-card>a{
  position:relative;display:block;height:100%;overflow:hidden;isolation:isolate;
  border-radius:18px;background:var(--navy);color:#fff;
}
.ex-card img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
/* 글자 가독성용 그늘 : 위는 옅게(태그), 아래는 진하게(제목) */
.ex-card>a::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    /* 아래쪽 그라데이션을 진하게 했습니다 — 밝거나 복잡한 사진 위에서도
       사례명이 묻히지 않게 (2026-10 5차 수정 9번) */
    linear-gradient(180deg,rgba(8,16,44,.42) 0%,rgba(8,16,44,0) 30%),
    linear-gradient(0deg,rgba(8,16,44,.95) 0%,rgba(8,16,44,.80) 24%,rgba(8,16,44,.46) 52%,rgba(8,16,44,0) 80%);
  transition:background-color .3s var(--ease);
}
/* 분류는 카드 위쪽 칩 대신 제목 바로 위에 작은 글씨 한 줄로 둡니다
   (상단 필터에서 이미 보이므로 중복을 줄였습니다) */
.ex-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 20px}
.ex-meta{
  display:block;margin-bottom:6px;
  font-size:12px;font-weight:500;letter-spacing:-.01em;line-height:1.4;
  color:rgba(255,255,255,.78);text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.ex-card.is-big .ex-meta{font-size:13px;margin-bottom:8px}
.ex-cap h3{
  margin:0;font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.04em;line-height:1.35;
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}
.ex-card.is-big .ex-cap{padding:24px 28px 28px}
.ex-card.is-big .ex-cap h3{font-size:clamp(24px,2.4vw,32px)}

/* 자세히 보기 : 마우스를 올리면 제목 아래로 펼쳐집니다 */
.ex-go{
  display:inline-flex;align-items:center;gap:6px;
  height:0;margin-top:0;opacity:0;overflow:hidden;
  font-size:14px;font-weight:600;color:#fff;
  transition:height .28s var(--ease),margin .28s var(--ease),opacity .2s var(--ease);
}
.ex-go svg{width:14px;height:14px}
.ex-card>a:hover .ex-go,
.ex-card>a:focus-visible .ex-go{height:34px;margin-top:10px;opacity:1}
.ex-go{
  padding:0 14px;border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--violet));
}
.ex-card>a:hover img{transform:scale(1.05)}
.ex-card>a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* 마우스가 없는 기기 : 버튼을 항상 보여줍니다 */
@media (hover:none){
  .ex-go{height:32px;margin-top:10px;opacity:1}
}

/* 더 보기로 새로 나타난 카드 */
.ex-card.is-new{animation:exIn .45s var(--ease) both}
@keyframes exIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 결과 없음 */
.ex-empty{
  padding:64px 20px;border:1px dashed var(--line);border-radius:20px;text-align:center;
}
.ex-empty p{margin:0 0 20px;font-size:15px;line-height:1.7;color:var(--ink-50)}
.ex-empty b{display:block;font-size:18px;color:var(--ink);letter-spacing:-.03em}

/* 더 보기 */
.ex-foot{display:flex;justify-content:center;margin-top:clamp(30px,3.4vw,44px)}
.ex-foot[hidden]{display:none}
.ex-morebtn{
  display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 30px;border-radius:999px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  font:inherit;font-size:15.5px;font-weight:700;color:var(--ink);
  transition:.2s var(--ease);
}
.ex-morebtn svg{width:16px;height:16px;color:var(--blue)}
.ex-morebtn .n{font-size:13.5px;font-weight:600;color:var(--ink-50)}
.ex-morebtn:hover{border-color:var(--navy);box-shadow:0 10px 26px rgba(15,43,112,.1)}

/* =========================================================
   상세
   ========================================================= */
.ex-view-head{padding:clamp(26px,3vw,40px) clamp(20px,3vw,40px)}
.ex-vtags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ex-vtags a{transition:.18s var(--ease)}
.ex-view .t-sol{background:var(--navy);color:#fff}
.ex-view .t-det{background:var(--mist-2);color:var(--blue)}
.ex-view .t-sec{border:1px solid #C9D4EC;background:#fff;color:var(--ink-70)}
.ex-vtags a:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,43,112,.12)}
.ex-view-head h2{font-size:clamp(24px,2.8vw,34px)}

.ex-info{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;
  margin:clamp(20px,2.4vw,28px) 0 0;padding-top:6px;border-top:1px solid var(--line);
}
.ex-info>div{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.ex-info>div.full{grid-column:1 / -1;border-bottom:0}
.ex-info dt{flex:none;width:64px;font-size:14px;font-weight:700;color:var(--navy);line-height:1.7}
.ex-info dd{margin:0;min-width:0;font-size:15px;line-height:1.7;color:var(--ink-70);overflow-wrap:anywhere}
.ex-info dd a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.ex-items{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ex-items li{
  display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;
  background:#fff;border:1px solid var(--line);font-size:14px;color:var(--ink-70);
}

/* 본문 : 에디터 결과물 (가운데 정렬 기본) */
.ex-content{text-align:center;padding-inline:clamp(16px,4vw,60px)}
.ex-content p{max-width:760px;margin-inline:auto}
.ex-content p:has(img){max-width:1080px;margin-top:clamp(36px,4vw,56px)}
.ex-content p:has(img)+p{margin-top:22px}
.ex-content img{display:block;max-width:100%;height:auto;margin:0 auto;border:0;border-radius:14px}
/* 한 문단에 이미지 두 장 → 나란히 */
.ex-content p:has(> img + img){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.ex-content p:has(> img + img) img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:1024px){
  /* 2열 : 큰 블록은 가로 2칸, 세로 블록은 세로 2칸 → 묶음당 5줄 */
  .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(180px,30vw,260px)}
  .ex-card.is-big,.ex-card.is-big.is-flip{grid-column:span 2;grid-row:span 1}
  .ex-card.is-tall.is-flip{grid-column:auto}
  .ex-info{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .ex-row{grid-template-columns:1fr;gap:10px}
  .ex-lb{padding-top:0}
  .ex-chip span{height:36px;padding:0 14px;font-size:14px;white-space:nowrap}
  /* 칩은 한 줄 가로 스크롤 (필터가 첫 화면을 다 차지하지 않도록)
     · 카드 밖으로 밀려 나가지 않도록 음수 여백 없이 안쪽에서만 스크롤합니다 */
  .ex-filter{overflow:hidden}
  .ex-row{min-width:0}
  .ex-chips{
    min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent);
  }
  .ex-search{flex-wrap:wrap;min-width:0}
  .ex-chips::-webkit-scrollbar{display:none}
  .ex-chip{flex:none}
  .ex-search input{flex-basis:100%;max-width:none}
  .ex-search .ex-btn{flex:1}
  .ex-info{grid-template-columns:1fr}
  .ex-info>div.full{border-top:0}
}
@media (max-width:560px){
  /* 1열 : 모든 블록 같은 크기 */
  .ex-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .ex-card,.ex-card.is-big,.ex-card.is-tall,.ex-card.is-wide,.ex-card.is-big.is-flip,.ex-card.is-tall.is-flip{
    grid-column:auto;grid-row:auto;aspect-ratio:4 / 3;
  }
  .ex-card.is-big .ex-cap{padding:18px 20px 20px}
  .ex-card.is-big .ex-cap h3{font-size:21px}
  .ex-filter{border-radius:16px}
  .ex-content p:has(> img + img){gap:8px}
  .ex-content p:has(> img + img) img{border-radius:10px}
  .ex-content p br{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ex-card img,.ex-go,.ex-card.is-new{transition:none;animation:none}
}

/* hidden 속성 우선 (display 를 지정한 요소) */
.ex-grid[hidden],.ex-detail[hidden]{display:none}