@charset "utf-8";

#wrap.story .board_list > .area,
#wrap.story .board_list > .area * {box-sizing:border-box;}

#wrap.story .board_list {--story-ink:#242121;--story-muted:#746d6d;--story-accent:#ff0000;--story-soft:#fff2f2;--story-line:#e7dfdf;padding-bottom:70px;}
#wrap.story .board_list > .area {color:var(--story-ink);font-family:"Pretendard","Noto Sans KR",sans-serif;}

#wrap.story .story-result-summary {float:left;margin-top:3px;color:var(--story-muted);font-size:13px;line-height:30px;}
#wrap.story .story-result-summary strong {color:var(--story-accent);font-size:16px;}
#wrap.story .board_list .sl_box {z-index:20;margin-left:10px;}
#wrap.story .board_list .sl_box p {width:112px;height:34px;margin:0;padding:7px 12px;border:1px solid var(--story-line);border-radius:8px;background:#fff;color:#555;cursor:pointer;}
#wrap.story .board_list .sl_box ul {z-index:20;width:112px;margin-top:37px;border-radius:9px;box-shadow:0 9px 25px rgba(0,0,0,.12);}
#wrap.story .board_list .sl_box li {height:auto;}
#wrap.story .board_list .sl_box ul a {width:112px;margin:0;padding:8px 12px;border:1px solid var(--story-line);border-bottom:0;background:#fff;font-size:12px;}
#wrap.story .board_list .sl_box ul li:first-child a {border-radius:9px 9px 0 0;}
#wrap.story .board_list .sl_box ul li:last-child a {border-bottom:1px solid var(--story-line);border-radius:0 0 9px 9px;}
#wrap.story .board_list .sl_box ul a.active,
#wrap.story .board_list .sl_box ul a:hover {background:var(--story-soft);color:var(--story-accent);}
#wrap.story .board_list .view_type {height:45px;margin-bottom:8px;padding-right:122px;}
#wrap.story .board_list .view_type .button {width:34px;height:34px;padding:7px;border:1px solid var(--story-line);background:#fff;}
#wrap.story .board_list .view_type .button:first-child {border-radius:8px 0 0 8px;}
#wrap.story .board_list .view_type .button:last-child {border-radius:0 8px 8px 0;}

#wrap.story .story-webzine {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;}
#wrap.story .story-webzine > li {position:relative;min-width:0;}
#wrap.story .story-webzine .story-select {position:absolute;z-index:5;top:14px;left:14px;}
#wrap.story .story-card {display:flex;min-height:250px;overflow:hidden;border:1px solid var(--story-line);border-radius:21px;background:#fff;color:var(--story-ink);box-shadow:0 8px 28px rgba(35,25,25,.055);transition:.22s ease;}
#wrap.story .story-card:hover {transform:translateY(-4px);border-color:#ffadad;box-shadow:0 17px 38px rgba(45,25,25,.11);}
#wrap.story .story-thumb {position:relative;flex:0 0 43%;min-height:250px;overflow:hidden;background:#f4f2f2;}
#wrap.story .story-thumb img {display:block;width:100%;height:100%;object-fit:cover;transition:.3s ease;}
#wrap.story .story-card:hover .story-thumb img {transform:scale(1.035);}
#wrap.story .story-thumb.is-fallback img {opacity:.85;}
#wrap.story .story-thumb.is-video:after {position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:rgba(255,0,0,.9);color:#fff;font-size:0;content:"";transform:translate(-50%,-50%);box-shadow:0 6px 20px rgba(0,0,0,.22);}
#wrap.story .story-thumb.is-video:before {position:absolute;z-index:2;left:calc(50% + 3px);top:50%;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #fff;content:"";transform:translate(-50%,-50%);}
#wrap.story .story-card-body {display:flex;min-width:0;flex:1;flex-direction:column;padding:25px 24px;}
#wrap.story .story-card-top {display:flex;align-items:center;gap:7px;margin-bottom:13px;}
#wrap.story .story-category,
#wrap.story .story-notice {display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border-radius:999px;background:var(--story-soft);color:var(--story-accent);font-size:11px;font-weight:800;}
#wrap.story .story-notice {background:var(--story-accent);color:#fff;}
#wrap.story .story-new {display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background:#333;color:#fff;font-size:9px;font-weight:900;}
#wrap.story .story-title {display:-webkit-box;overflow:hidden;margin:0 0 12px;color:#292525;font-size:19px;line-height:1.5;letter-spacing:-.025em;word-break:keep-all;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
#wrap.story .story-excerpt {display:-webkit-box;overflow:hidden;margin:0;color:var(--story-muted);font-size:13px;line-height:1.75;word-break:keep-all;-webkit-box-orient:vertical;-webkit-line-clamp:3;}
#wrap.story .story-meta {display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:18px;color:#999;font-size:11px;}
#wrap.story .story-meta span + span:before {margin-right:10px;color:#ddd;content:"·";}
#wrap.story .story-meta .comment {color:var(--story-accent);font-weight:800;}
#wrap.story .story-empty {grid-column:1/-1;padding:90px 20px;border:1px dashed var(--story-line);border-radius:20px;color:#999;text-align:center;}

#wrap.story .board_list .pg_wrap {margin-top:36px;padding:0;border:0;}
#wrap.story .board_list .pg {display:flex;width:100%;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;}
#wrap.story .board_list .pg .button,
#wrap.story .board_list .pg strong {display:inline-flex;min-width:38px;height:38px;align-items:center;justify-content:center;margin:0;padding:0 10px;border:1px solid var(--story-line);border-radius:9px;background:#fff;color:#555;font-size:12px;}
#wrap.story .board_list .pg strong.dark {border-color:var(--story-accent);background:var(--story-accent);color:#fff;}
#wrap.story .board_list .search_list {margin:32px 0 0;padding:24px;border:0;border-radius:17px;background:#f5f3f3;}
#wrap.story .board_list .search_list form {display:flex;max-width:720px;margin:0 auto;gap:7px;}
#wrap.story .board_list .search_list select,
#wrap.story .board_list .search_list input[name="stx"] {height:43px;margin:0;border:1px solid var(--story-line);border-radius:9px;background:#fff;}
#wrap.story .board_list .search_list select {flex:0 0 120px;padding:0 10px;}
#wrap.story .board_list .search_list input[name="stx"] {flex:1;width:auto;padding:0 13px;}
#wrap.story .board_list .search_list button {width:72px;height:43px;margin:0;border-radius:9px;background:#333;color:#fff;}

@media screen and (max-width:1000px) {
  #wrap.story .story-webzine {grid-template-columns:1fr;}
  #wrap.story .story-card {min-height:225px;}
  #wrap.story .story-thumb {min-height:225px;}
}

@media screen and (max-width:620px) {
  #wrap.story .story-result-summary {float:none;margin:0 0 8px;}
  #wrap.story .board_list .view_type {padding-right:122px;}
  #wrap.story .story-card {display:block;}
  #wrap.story .story-thumb {width:100%;min-height:220px;aspect-ratio:16/10;}
  #wrap.story .story-card-body {padding:22px 20px;}
  #wrap.story .story-title {font-size:18px;}
  #wrap.story .board_list .search_list form {display:grid;grid-template-columns:1fr 1fr;}
  #wrap.story .board_list .search_list select {width:100%;min-width:0;}
  #wrap.story .board_list .search_list input[name="stx"] {grid-column:1/-1;width:100%;}
  #wrap.story .board_list .search_list button {grid-column:1/-1;width:100%;}
}