/*----------------------------------------------------
Token
----------------------------------------------------*/
/* Anne changed 'lg' breakpoint from 992 to 1070 in bootstrap-grid-min.css */

:root{
  /* color ---------- */
  --color-body:#222;
  --color-gray-dark:#666;
  --color-gray:#888;
  --color-gray-light:#999;

  --color-primary:#FA4A74;
  --color-secondary:#00BC33;
  --color-emphasis:#FA0050;
  --color-brown-dark:#7D5634;
  --color-brown:#9E7B6D;
  --color-white:#FFF;

  --color-bg:#F7F8FB;
  --color-bg-hover:rgba(250,74,116,0.07);

  /* all in one ---------- */
  --border:1px solid rgba(0,0,0,0.12);
  --border-shadow:0 0 0 1px inset rgba(0,0,0,0.05);

  /* width ---------- */
  --width-md:720px;
  --width:1080px;

  /* unit ---------- */
  --unit:8px;
  --unit-050:calc(var(--unit)*0.5);   /* 4 */
  --unit-075:calc(var(--unit)*0.75);  /* 6 */
  --unit-150:calc(var(--unit)*1.5);   /* 12 */
  --unit-200:calc(var(--unit)*2);     /* 16 */
  --unit-250:calc(var(--unit)*2.5);   /* 20 */
  --unit-300:calc(var(--unit)*3);     /* 24 */
  --unit-400:calc(var(--unit)*4);     /* 32 */
  --unit-500:calc(var(--unit)*5);     /* 40 */
  --unit-600:calc(var(--unit)*6);     /* 48 */
  --unit-700:calc(var(--unit)*7);     /* 56 */
  --unit-800:calc(var(--unit)*8);     /* 64 */
  --unit-900:calc(var(--unit)*9);     /* 72 */
  --unit-full:999px;

 /* radius */
  --radius:var(--unit);         /* 8 */
  --radius-md:var(--unit-150);  /* 12 */
  --radius-lg:var(--unit-200);  /* 16 */
  --radius-circle:var(--unit-full);

  /* space */
  --space-top:var(--unit-300);
  --space-bottom:var(--unit-300);
  --space-gap-y:var(--unit-300);
  --space-side:var(--unit-250);

  /* thumbnail size */
  --thumb:74px;
  --thumb-md:74px;
  --thumb-lg:74px;

  /* override */
  --comp-height:var(--unit-600);
  --comp-radius:var(--unit);
  --comp-border-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

@media(min-width:768px){
  :root{
    --space-top:var(--unit-400);
    --space-bottom:var(--unit-400);
    --space-gap-y:var(--unit-400);
    --space-side:var(--unit-500);
    --thumb-lg:110px;
  }
}
@media(min-width:1070px){
  :root{
    --space-top:var(--unit-700);
    --space-bottom:var(--unit-700);
    --space-gap-y:var(--unit-500);
    --thumb-md:110px;
    --thumb-lg:160px;
  }
}


/* Container ---------- */
.container,
.container-mobile-full,
.container-md,
.container-md-mobile-full{width:100%; max-width:100%; margin-left:auto; margin-right:auto}
.container,
.container-md{padding-left:var(--space-side); padding-right:var(--space-side)}
.container-mobile-full{padding-left:0; padding-right:0; overflow:hidden}
@media(min-width:768px){
  .container, 
  .container-mobile-full, 
  .container-md, 
  .container-md-mobile-full{max-width:var(--width-md)}
  .container-mobile-full,
  .container-md-mobile-full{padding-left:var(--space-side); padding-right:var(--space-side)}
}
@media(min-width:1070px){
  .container,
  .container-mobile-full{max-width:var(--width)}
  .container-md-mobile-full{max-width:var(--width-md)}
}



/*----------------------------------------------------
Components
----------------------------------------------------*/
.dev{color:#4983f4; padding-top:100px; padding-bottom:100px; text-align:center; border-radius:10px; background-color:#EFEFEF; min-height:200px}

.dark,
.dark *{color:#FFF !important; border-color:#FFF !important}


/* Button ---------- */
.btn{height:var(--comp-height); background-color:#FFF; box-shadow:none; border:var(--border); padding:10px 16px; border-radius:var(--unit); font-size:15px; color:var(--color-body); line-height:1.3}
.btn::hover::before{opacity:0.15}

.btns{display:flex; gap:var(--unit); flex-wrap:wrap; justify-content:center}
.btns .btn{min-width:88px}

/* disabled */
.btn.disabled{opacity:0.5; pointer-events:none}
/* size */
.btn.size-md{height:40px; padding-left:12px; padding-right:12px; font-size:15px}
.btn.size-sm{height:36px; padding-left:8px; padding-right:8px; font-size:14px}
/* style : filled */
.style-filled:not(.color-white){background-color:var(--color-primary) !important; color:var(--color-white) !important; border:0}
.style-filled:hover{background-color:var(--color-primary) !important}
.style-filled-gray{background-color:#ECEDF1 !important; border:0; color:inherit !important}
/* style : icon */
.style-icon{width:40px; height:40px; min-width:unset !important; border:0; flex-shrink:0; font-size:20px}
.style-icon .ico::before{line-height:unset}
/* .style-icon:hover{background-color:var(--color-bg)} */
    .icon-example{background:url('/images/ico_search.svg') no-repeat center / 24px}

@media (min-width:1070px){
  .btn{font-size:16px}
}


/* Profile ---------- */
.profile-photo{border-radius:var(--radius-circle); box-shadow:0 0 0 1px inset rgba(0,0,0,0.05); background:url('/images/profile.jpg') no-repeat center / cover; width:80px; height:80px; font-size:0; flex-shrink:0}


/* Must Read ---------- */
.must-read{display:inline-block; vertical-align:middle; width:20px; height:20px; background:url('/images/ico_pin.svg') no-repeat center / contain; font-size:0; margin-top:-5px; margin-right:4px}


/* New ---------- */
.new{display:inline-block; vertical-align:middle; width:16px; height:16px; background:url('/images/ico_new.svg') no-repeat center / contain; font-size:0; margin-top:-3px}


/* Process ---------- */
.process-status{padding:6px 14px 5px; font-size:14px; border:var(--border); border-radius:var(--radius-circle); flex-shrink:0; background-color:var(--color-white); display:inline-block; text-wrap:nowrap}
.process-status.ing{background-color:var(--color-secondary); border-color:var(--color-secondary); color:var(--color-white)}
.process-status.finish{opacity:0.6}



/*----------------------------------------------------
LIST
----------------------------------------------------*/
/* visual ---------- */
.visual-wrap{overflow:hidden}
.visual{min-height:260px; background:url('/images/visual_home@2x.jpg') no-repeat center / cover; display:flex; justify-content:center; align-items:center; padding-top:24px; padding-bottom:24px; position:relative}
.visual::after{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.2)}
.visual .text-wrap{max-width:400px; text-align:center; position:relative; z-index:1}
.visual .title{font-size:22px; line-height:1.4; letter-spacing:-0.01em; color:rgba(42,40,39,0.9)}
.visual .desc{font-size:14px; line-height:1.4; color:rgba(42,40,39,0.6); margin-top:8px}
@media(min-width:1070px){
  .visual-wrap{margin-top:-100px}
  .visual{min-height:650px; padding-top:80px}
  .visual .text-wrap{max-width:640px}
  .visual .title{font-size:42px; line-height:1.35; letter-spacing:-0.02em}
  .visual .desc{font-size:18px; line-height:1.5; margin-top:12px}
}


/* text up */
.visual .title,
.visual .desc{opacity:0; animation:text-up 1.5s; animation-fill-mode:forwards; transition-timing-function:linear}
.visual .desc{animation-delay:0.2s}
@keyframes text-up {
  0%   {transform:translateY(30%) scale(1.01); opacity:0}
  100% {transform:translateY(0) scale(1); opacity:1}
}


/* Ken Burns Effect */
.visual{
	animation: kenburns-move 1.8s ease !important;
	-ms-animation: kenburns-move 1.8s ease !important;
	-webkit-animation: kenburns-move 1.8s ease !important;
	-o-animation: kenburns-move 1.8s ease !important;
	-moz-animation: kenburns-move 1.8s ease !important;
	animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000) !important;
	transform: translateZ(0) scale(1) rotate(0deg);
	transition: 1800ms;
  -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
@-webkit-keyframes kenburns-move {
  0% {
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    opacity:0
  }
  100% {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    opacity:1
  }
}


/* banner write ---------- */
.banner-write{background-color:#FAF3DD; border-radius:12px; display:flex; gap:16px; align-items:center; padding:20px}
.banner-write::after{content:''; display:block; width:56px; height:72px; background:url('/images/banner_write.svg') no-repeat left center / contain; flex-shrink:0}
.banner-write .text{flex-grow:1; gap:16px}
.btn-write{background-color:var(--color-brown); color:#FFF; border-radius:999px; padding:6px 4px 6px 13px; font-size:13px; display:inline-block; flex-shrink:0; margin-top:8px}
.banner-write .title{font-size:16px; color:var(--color-brown-dark); line-height:1.35}
.btn-write .ico::before{font-size:1.2em; margin-left:0}
@media(min-width:768px){
  .banner-write{padding-left:40px; padding-right:40px}
}
@media(min-width:1070px){
  .banner-write{border-radius:20px}
  .banner-write::after{order:-1}
  .banner-write > div{display:flex; flex-direction:row; align-items:center; flex-grow:1; gap:30px}
  .banner-write .title{font-size:17px; flex-grow:1}
  .btn-write{font-size:16px; padding:12px 12px 12px 24px; margin-top:0}
}



/* page title ---------- */
.page-title .title{font-size:22px; font-weight:600; line-height:1.3}
.page-title .desc{font-size:14px; line-height:1.4; color:var(--color-gray); margin-top:6px}
.page-title .btn{flex-shrink:0}
.page-title.has-btn{display:flex; align-items:flex-start; gap:var(--unit-200)}
.page-title.has-btn .text{flex-grow:1}
@media (min-width:1070px) {
  .page-title .title{font-size:28px; line-height:1.3}
  .page-title .style-text{font-size:16px}
  .page-title .btn{margin-top:5px}
  .page-title.has-btn{gap:var(--unit-400)}
}



/* slide toggles---------- */
.slide-toggles{position:relative; width:100%}
.slide-toggles .items{display:flex; flex-direction:row; flex-wrap:nowrap; gap:var(--unit-050); overflow:hidden; overflow-x:auto; padding:inherit; padding-left:20px; padding-right:55px; -ms-overflow-style:none; scrollbar-width:none}
.slide-toggles .items::-webkit-scrollbar{display:none}
.slide-toggles .slide-item{display:flex; align-items:center; padding:3px 14px; height:40px; font-size:14px; background-color:var(--color-bg); border-radius:var(--radius-circle); flex-shrink:0; transition:all 0.2s ease; gap:var(--unit-050); cursor:pointer}
.slide-toggles .slide-item:hover{background-color:var(--color-bg-hover)}
.slide-toggles .slide-item .count{font-size:0.8em; opacity:0.5}
.slide-toggles .slide-item.current{background-color:var(--color-primary); color:#fff}
.slide-toggles .slide-item.current .count{opacity:1}
/* btn */
.btn-toggles{position:absolute; top:0; right:0; width:80px; height:100%; cursor:pointer}
.btn-toggles::before{content:''; position: absolute; right:20px; width:40px; height:40px; box-shadow:0 0 0 1px inset rgba(0,0,0,0.1); border-radius:var(--radius-circle); background:#FFF url('/images/ico_arrow_down.svg') no-repeat center / 26px; display:flex; justify-content:center; align-items:center; margin:0; z-index:2; opacity:0.9}
.btn-toggles::after{content:''; display:block; position:absolute; top:0; right:0; width:100%; height:100%; background:linear-gradient(to right, rgba(255, 255, 255, 0.00) 0%, #FFF 30%); z-index:1}
.btn-toggles:hover::before{background-color:var(--color-bg)}
/* active */
.btn-toggles.active::before{transform:rotate(180deg)}
.btn-toggles.active::after{display:none}
.btn-toggles.active + .items{flex-direction:inherit; overflow-x:inherit; flex-wrap:wrap; padding-left:20px; padding-right:44px}
@media(max-width:767px){
  .container.slide-toggles{padding-left:0; padding-right:0}
}
@media(min-width:768px){
  .slide-toggles .items{gap:var(--unit-075)}
  .slide-toggles .items,
  .btn-toggles.active + .items{padding-left:0}
}
@media(min-width:1070px){
  .slide-toggles .items{flex-direction:inherit; flex-wrap:wrap; overflow-x:inherit; padding:0}
  .slide-toggles .slide-item{padding:10px 16px; font-size:16px; height:44px}
  .btn-toggles{display:none !important}
}

/* slide-toggles-and-filter */
.slide-toggles-and-filter{display:flex; gap:var(--unit-050); padding-right:20px}
.slide-toggles-and-filter .slide-toggles{width:calc(100% - 44px); margin-top:0; margin-bottom:0}
.slide-toggles-and-filter .btn-toggles{width:80px; right:-20px}
.slide-toggles-and-filter .btn-toggles::before{right:20px}
.slide-toggles-and-filter .btn-toggles.active + .items{padding-right:44px}
.brn-filter-bookmark{width:40px; height:40px; box-shadow:0 0 0 1px inset rgba(0,0,0,0.1); border-radius:var(--radius-circle); display:flex; justify-content:center; align-items:center; flex-shrink:0; cursor:pointer; z-index:1}
.brn-filter-bookmark::before{content:''; width:40px; height:40px; background:url('/images/ico_bookmark_filter.svg') no-repeat left center / auto 40px; display:block}
.brn-filter-bookmark.active{box-shadow:0 0 0 1px inset var(--color-primary)}
.brn-filter-bookmark.active::before{background-position:right center}
@media(min-width:768px){
  .slide-toggles-and-filter{padding-right:0}
}
@media(min-width:1070px){
  .brn-filter-bookmark{width:44px; height:44px}
}



/* tags ---------- */
.tags{display:flex; flex-direction:row; flex-wrap:wrap; gap:var(--unit-050)}
.tags .item{display:inline-block; padding:7px 12px; font-size:14px;  background-color:var(--color-bg); border-radius:var(--radius-circle); transition:all 0.2s ease; cursor:pointer}
.tags .item:hover{background-color:rgba(250,74,116,0.1)}
@media(min-width:1070px){
  .tags .item{font-size:15px; padding:9px 16px}
}



/* list ---------- */
.lists{display:flex; position:relative; flex-wrap:wrap}
.lists .list-link:hover .post-title{color:var(--color-primary)}

.lists .thum{overflow:hidden; position:relative; border-radius:var(--radius)}
.lists .thum::after{content:''; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,0.03); border-radius:var(--radius); z-index:1}
.lists .thum-img{transition:all 0.2s ease; background-color:var(--black-5)}
.lists a:hover .thum-img{transform:scale(1.03); transition:transform 400ms cubic-bezier(0.4, 0, 0.25, 1), opacity 1s cubic-bezier(0.4, 0, 0.25, 1), -webkit-transform 400ms cubic-bezier(0.4, 0, 0.25, 1)}

.lists .info{padding:12px 0; background-color:transparent !important}
.lists .post-title{font-size:17px; font-weight:500; line-height:1.4; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; min-height:24px}
.lists .post-title strong{color:var(--color-emphasis)}
.lists .post-desc{font-size:14px; color:var(--color-gray-light); line-height:1.5; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box;}
.lists .post-detail{margin-top:6px !important}
.lists .like .ico{font-size:0.92em}
.lists .info > *:not(:first-child){margin-top:6px}
.info .category{font-size:13px; color:var(--color-primary)}
.post-detail{font-size:13px; display:flex; row-gap:3px; column-gap:var(--unit-075); flex-wrap:wrap; color:var(--color-gray-light)}
.user-name{display:flex; align-items:center; gap:6px; line-height:1.3}
.user-name .nickname{font-size:14px; color:var(--color-gray-light)}
.user-name .profile-photo{width:24px; height:24px}
@media(max-width:1069px){
  .lists .post-desc{display:none}
}
@media(min-width:1070px){
  .lists .post-title{font-size:20px}
}

/* ----- list card */
.list-card .post-title{font-size:15px}
.list-card .list-item::after{display:none}
@media (min-width:1070px) {
  .list-card .post-title{font-size:16px}
}

/* ----- list photo */
.list-photo{--photo-padding:0.5px; row-gap:calc(2* var(--photo-padding))}
.list-photo > *{padding-left:var(--photo-padding); padding-right:var(--photo-padding); position:relative}
.list-photo.row{margin-left:calc(-1* var(--photo-padding)); margin-right:calc(-1* var(--photo-padding))}
.list-photo .thum{border-radius:0}
.list-photo .thum::after{display:none}
.list-photo .thum-img{padding-bottom:100%}
.list-photo .list-link{position:relative; display:block; border-radius:0; overflow:hidden}
.list-photo .info{position:absolute; left:0; right:0; bottom:0; padding:20px 10px 10px 10px; font-size:15px; line-height:1.35; overflow:hidden; background:linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%)}
.list-photo .category{border:1px solid rgba(255, 255, 255, 0.5) !important; border-radius:var(--radius-circle); padding:3px 6px; display:inline-block; font-size:11px; line-height:1.5; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.list-photo :is(.category, .user-name .nickname){overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-inline-box}
.list-photo .user-name{font-size:12px; gap:4px}
.list-photo .user-name .profile-photo{width:20px; height:20px; box-shadow:0 0 0 1px rgba(0,0,0,0.05)}
.list-photo .user-name .nickname{font-size:12px}
.list-photo .post-detail{margin-top:3px !important; font-size:12px}
.list-photo .post-title{font-size:13px; font-weight:500; min-height:auto}
/* thum bookmark */
.list-photo .btn-bookmark{position:absolute; top:2px; right:0; width:40px; height:40px; display:block; cursor:pointer; background:url('/images/ico_bookmark_thum.svg') no-repeat left center / auto 40px; z-index:2}
.list-photo .btn-bookmark.active{background-position:right center}

@media(max-width:767px){
  .list-photo :is(.category, .view, .like, .comment){display:none !important}
}
@media(min-width:768px){
  .list-photo{--photo-padding:8px}
  .list-photo .list-link{border-radius:var(--radius-lg)}
  .list-photo .info{padding:20px 16px 15px}
  .list-photo .user-name{font-size:13px; gap:6px}
  .list-photo .user-name .profile-photo{width:24px; height:24px}
  .list-photo .user-name .nickname,
  .list-photo .post-detail{font-size:13px}
  /* thum bookmark */
  .list-photo .btn-bookmark{top:4px; right:12px}
}
@media(min-width:1070px){
  .list-photo .post-title{font-size:15px}
  .list-photo .info{padding:30px 17px 16px}
}

/* ----- list lateral */
.list-lateral{flex-direction:column; gap:0}
.list-lateral .list-link{display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:16px; padding-bottom:16px; min-height:85px; border-bottom:1px solid rgba(0,0,0,0.05)}
.list-lateral .info{flex-grow:1; padding:0}
.list-lateral :is(.category, .user-name .nickname){overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-inline-box}
.list-lateral .thum{ padding-bottom:0; width:var(--thumb-md); height:var(--thumb-md); border-radius:var(--radius); flex-shrink:0; order:1}
.list-lateral .thum-img{height:inherit}
.list-lateral .process-status{padding:5px 10px 4px; font-size:13px}
.list-lateral .info .draft{font-size:13px; color:var(--color-secondary); margin-top:6px !important}
.list-lateral .btn-arrow{opacity:0.3}

@media(min-width:768px){
  .list-lateral .thum{border-radius:var(--radius-md)}
}
@media(min-width:1070px){
  .list-lateral .list-link{gap:32px; min-height:95px; padding-top:24px; padding-bottom:24px}
  .list-lateral .thum{width:var(--thumb-lg); height:var(--thumb-lg)}
  .list-lateral .process-status{font-size:15px}
}
/* bookmark */
.list-lateral .list-item.has-boomkark{position:relative}
.list-lateral .list-item.has-boomkark .btn-bookmark{position:absolute; top:50%; right:0; transform:translateY(-50%); width:32px; height:32px; display:block; background:url('/images/ico_bookmark_filter.svg') no-repeat left center / auto 40px; z-index:1; border:0}
.list-lateral .list-item.has-boomkark .btn-bookmark.active{background-position:right -3px center}
.list-lateral .list-item.has-boomkark .list-link{padding-right:40px}
@media(min-width:768px){
  .list-lateral .list-item.has-boomkark .btn-bookmark{width:40px; height:40px}
  .list-lateral .list-item.has-boomkark .btn-bookmark.active{background-position:right center}
  .list-lateral .list-item.has-boomkark .list-link{padding-right:48px}
}



/* pagination ---------- */
.pagination{gap:var(--unit-500); display:flex; align-items:center; justify-content:center}
.pagination .page-arrow{font-size:15px; width:40px; height:40px; color:rgba(0, 0, 0, 0.5); background-color:#F3F3F6; border-radius:var(--radius-circle); display:flex; justify-content:center; align-items:center; transition:all 0.2s ease}
.pagination .page-arrow::before{content:''; width:24px; height:24px; background:url('/images/ico_arrow.svg') no-repeat center / contain; vertical-align:middle; display:inline-block; opacity:0.7}
.pagination .page-arrow.prev::before{transform:rotate(180deg)}
.pagination .page-arrow:hover{background-color:rgba(0, 0, 0, 0.1)}
.pagination .page-arrow.disabled{pointer-events:none; opacity:0.5}
.pagination .field{display:flex; align-items:center; gap:5px}
.pagination .field .current{width:36px; height:40px; text-align:center; border:1px solid rgba(0, 0, 0, 0.15); border-radius:var(--comp-radius)}



/* search ---------- */
.list-search .input{max-width:335px; border-radius:var(--comp-radius)}
.list-search .input-right-addon{padding-right:10px}
.list-search .input-field{padding-right:0; font-size:16px}
.list-search .ico{font-size:19px; opacity:0.7}
@media(min-width:1070px){
  .list-search{padding-top:var(--unit-200)}
}



/* no data ---------- */
.no-data{text-align:center; padding-top:80px; padding-bottom:80px; font-size:15px; color:var(--color-gray-light)}
.no-data::before{content:''; display:block; background:url('/images/ico_smile.svg') no-repeat center; background-size:contain; width:40px; height:40px; margin:0 auto 15px; opacity:0.3}
@media(min-width:1070px){
  .no-data{font-size:16px}
  .no-data::before{width:56px; height:56px}
}



/*----------------------------------------------------
VIEW
----------------------------------------------------*/
/* article-header ---------- */
.article-header{display:flex; flex-direction:column; gap:var(--unit); align-items:center; text-align:center; padding-top:10px; padding-bottom:10px}
.article-header .category{font-size:14px; color:var(--color-primary)}
.article-header .post-title{font-size:24px; font-weight:600; letter-spacing:-0.01em; line-height:1.4; flex-grow:1}
.article-header .post-detail{justify-content:center}
.article-header .must-read{margin-top:0; margin-right:0}
.article-header .user-name .profile-photo{width:32px; height:32px}
@media (min-width:1070px){
  .article-header{padding-top:0; padding-bottom:0}
  .article-header .category{font-size:15px}
  .article-header .post-title{font-size:32px; line-height:1.4}
}
/* status */
.article-header .post-status{display:inline-block; border:var(--border); border-radius:var(--radius-circle); font-size:14px; line-height:1.4; background-color:var(--color-bg); padding:9px 16px 8px; margin-bottom:10px}
.article-header .post-status.draft{color:var(--color-emphasis); border:1px solid currentColor; background-color:#FFF}
.article-header .post-status.ing{color:var(--color-secondary); border:1px solid currentColor; background-color:#FFF}
.article-header .post-status.finish{color:var(--color-gray); border-color:rgba(0, 0, 0, 0.07)}
@media(max-width:320px){
  .article-header .post-status{border-radius:var(--unit); padding-left:10px; padding-right:10px}
}


/*  ↓↓↓↓↓↓↓↓↓↓  컴포넌트 페이지 확인용 : 예루살렘/참여마당 두 메뉴의 본문 상단 수정 ↓↓↓↓↓↓↓↓↓↓  */
.comp-flower{align-items:flex-start; text-align:left}
.comp-flower .post-status{margin-bottom:16px}
.comp-flower .info-wrap{position:relative; padding-left:48px}
.comp-flower .user-name .nickname{color:var(--color-body); font-size:15px; font-weight:500; margin-bottom:2px}
.comp-flower .user-name .profile-photo{position:absolute; top:2px; left:0; width:40px; height:40px}
.comp-flower .post-detail{justify-content:flex-start}
.comp-flower .category{color:var(--color-gray-light); font-size:13px}



/* files ---------- */
.files{background-color:var(--color-bg); border-radius:var(--unit-150); margin-top:var(--content-margin); padding:12px 13px}
.files li a{display:flex; gap:4px; font-size:14px; color:var(--color-gray); line-height:1.4; padding:3px 0}
.files li a .ico{color:var(--color-primary); font-size:1.1em; flex-shrink:0; margin-top:-1px}
.files li a:hover{color:var(--color-primary)}
@media (min-width:1070px){
  .files{margin-bottom:var(--content-margin)}
  .files li a{font-size:15px}
}



/* photo gallery ---------- */
.swiper-slide-thumb-active{box-shadow:inset 0 0 0 2px var(--color-primary)}
.photo-gallery .swiper-preview .swiper-slide{text-align:center}
.photo-gallery .swiper-thumb{margin-top:16px} /* padding-left:20px 왼쪽 정렬일 때 적용 */
.photo-gallery .swiper-thumb .swiper-wrapper{justify-content:center}
.photo-gallery .swiper-thumb .swiper-slide{width:64px !important; height:64px; background:no-repeat center / cover; border-radius:6px}
.photo-gallery .swiper-thumb .swiper-wrapper > div:last-child{margin-right:0 !important}
.photo-gallery .swiper-button-prev,
.swiper-button-next{color:#FFF !important}
.swiper-button-prev:after, .swiper-button-next:after{font-size:32px !important}
@media(min-width:768px){
  .photo-gallery{max-width:var(--width-md)}
  .photo-gallery .swiper-preview .swiper-slide{border-radius:16px; overflow:hidden}
  .photo-gallery .swiper-preview .swiper-slide img{border-radius:16px}
  .photo-gallery .swiper-thumb{padding-left:0}
}
@media (min-width:1070px){
  .photo-gallery .swiper-thumb .swiper-slide{width:88px !important; height:88px; border-radius:8px}
}



/* post content ---------- */
.article-contents figure{margin-top:var(--content-margin); margin-bottom:var(--content-margin)}
.article-contents picture{border-radius:var(--radius-md); overflow:hidden; display:block}
.article-contents figcaption{font-size:13px; color:var(--color-gray); line-height:1.6; margin-top:8px}
.article-contents p{font-size:18px; line-height:1.7; margin-top:24px} 
.article-contents > *{margin-top:var(--content-margin); margin-bottom:var(--content-margin)}



/* rights ---------- */
.article-rights{color:var(--color-gray-light); font-size:13px; text-align:center}



/* tags ---------- */
.tags{display:flex; flex-wrap:wrap; gap:var(--unit)}
.tags .tag{display:flex; align-items:center; padding:7px 12px; height:36px; background-color:var(--color-bg); border-radius:var(--radius-circle); flex-shrink:0; transition:all 0.2s ease; gap:2px; font-size:14px; cursor:pointer}
.tags .tag::before{content:'#'; display:inlline-block; color:var(--color-gray); font-size:0.875em}
/* btn delete */
.tags .tag .btn-delete-tag{color:var(--color-primary); font-size:0.7em; background-color:transparent; padding:1px 0 0; height:100%}
.tags .tag .btn-delete-tag .ico{font-size:1.1em}
/* .tags .tag .btn-delete-tag::before{display:none} */
/* btn more */
.btn-tag-more{height:36px; padding:7px 12px; gap:2px; border-radius:var(--radius-circle); font-size:14px}
.btn-tag-more .ico::before{margin:0}
.btn-tag-more.active .ico::before{transform:rotate(180deg)}
@media (min-width:1070px){
  .tags .tag{font-size:15px; height:40px}
  .btn-tag-more{height:40px; font-size:15px}
  /* a hover */
  .tags a.tag:hover{background-color:var(--color-bg-hover); color:var(--color-primary)}
  .tags a.tag:hover::before{color:var(--color-primary)}
}



/* .user action ---------- */
.user-action{display:flex; justify-content:center; gap:var(--unit); text-align:center}
.user-action .btn{width:72px; height:72px; border-radius:var(--radius-circle); display:flex; justify-content:center; align-items:center; background-color:var(--color-bg); border-width:0; margin:0 auto}
.user-action .btn::after{content:''; display:block; width:32px; height:32px; background-repeat:no-repeat; background-position:left center; background-size:auto 32px}
.user-action .btn.active::after{background-position:right center}
.user-action .btn-like::after{background-image:url('/images/ico_like.svg')}
.user-action .btn-bookmark::after{background-image:url('/images/ico_bookmark_view.svg')}
.user-action .text{font-size:14px; color:var(--color-gray-light); margin-top:var(--unit); line-height:1.4}



/* toast ---------- */
/* 기본 스타일은 omposables > useToast.ts에 작성되어 있음. 해당 파일만 가져다쓰면 되도록.
커스텀하려면 여기에 추가로 작성하면 됨 */
#toast .link{color:#FFDF6E; text-decoration:underline}
#toast .ico-attention-circle{color:#FFDF6E; flex-shrink:0}



/* related posts ---------- */
.related .related-title{font-size:17px; margin-bottom:12px; font-weight:500}
.related .list-photo{--photo-padding:8px}
.related .list-photo .list-link{border-radius:var(--radius)}
.related .list-photo .btn-bookmark{top:4px; right:10px}
.related .list-photo :is(.view, .like, .comment){display:none !important}
.related .list-lateral .thum{width:var(--thumb-md); height:var(--thumb-md)}
.related .list-lateral .list-item:last-child .list-link{border-bottom:0}
@media (min-width:576px){
  .related .related-title{font-size:18px}
  .related .list-photo .list-item:last-child{display:none}
  .related .list-photo .list-item{width:33.333333%}
}
@media (min-width:1070px){
  .related .related-title{font-size:19px}
  .related .list-photo .list-link{border-radius:var(--radius-lg)}
}



/*----------------------------------------------------
WRITE
----------------------------------------------------*/

/* write ---------- */
.write-form > div:not(:first-child){margin-top:var(--space-gap-y)}
.form-label{color:var(--color-body); font-weight:500; font-size:17px}
.form-guide{font-size:15px; color:var(--color-gray); line-height:1.5; margin-bottom:8px}
.input:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3); border-color:rgba(0,0,0,0.3)}
/* check */
.checkbox-group{display:flex; flex-wrap:wrap; column-gap:20px; row-gap:10px; margin-top:5px}
.form-check{margin:0}
.form-check .form-check-label .cb-label{color:var(--color-gray-dark); margin-left:6px}
.form-check .form-check-label:hover .check-ico{border-color:var(--color-primary); background-color:var(--color-bg-hover)}/* #efebff */
/* file */
.file-upload .btn-delete-file{position:absolute; right:2px; top:50%; width:48px; height:100%; color:rgba(0,0,0,0.3); font-size:17px; transform:translateY(-50%)}
.file-upload .btn-delete-file:hover{color:rgba(0,0,0,0.6)}
.file-upload .btn{width:48px; height:48px; cursor:pointer}
.file-upload .input-group > *:not(:last-child){margin-right:0}
.file-upload .input-group{margin-bottom:8px; gap:4px}
.file-upload .input.disabled{background-color:rgba(0,0,0,0.07); opacity:0.5}
.file-upload .input.upload-name{color:inherit; padding-left:12px; padding-right:45px}
.file-guide{color:var(--color-gray); font-size:14px; line-height:1.5; margin-top:var(--unit-200)}
.file-guide li{padding-left:10px; position:relative}
.file-guide li:not(:first-child){margin-top:5px}
.file-guide li::before{content:'•';position:absolute; left:0; margin-right:5px}
/* agreement */
.agreement .form-label{font-size:16px; font-weight:400}
.agreement .form-check{margin-top:var(--unit)}
@media (min-width:1070px){
  .write-form .btns{margin-top:50px !important}
}



/* dropdown layer ---------- */
.droplayer{position:relative; display:inline-block; width:100%; margin-top:var(--unit-200)}
.droplayer input{padding:15px; box-sizing:border-box; border:0; width:100%; font-size:16px}
.droplayer input:focus{outline:none}

.droplayer .dropwrap{position:relative}
.droplayer .dropwrap::before{content:''; display:block; position:absolute; top:20px; right:16px; border:solid #999; border-width:0 1.5px 1.5px 0; padding:3px; transform:rotate(45deg)}
.droplayer #dropwrap.active::before{transform:rotate(-135deg); margin-top:2px}
.droplayer #dropwrap.active #default_input{border-radius:8px 8px 0 0}
.droplayer #default_input{background-color:#FFF; cursor:pointer}

.droplayer input{width:100%; font-size:16px; border-radius:8px; padding:15px; background:#FFF; border:1px solid rgba(0, 0, 0, 0.15); transition:all 0.2s ease; outline:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; height:var(--comp-height) !important}
.droplayer input::placeholder{color:#888}
.droplayer input:hover{border-color:rgba(0, 0, 0, 0.2)}
/* list */
.droplayer .dropdown-lists{display:block; border:var(--border); border-radius:0 0 8px 8px; overflow:hidden; width:100%; margin-top:-1px}
/* .droplayer .dropdown-lists{display:block; position:absolute; left:0; top:47px; border:var(--border); border-radius:0 0 8px 8px; overflow:hidden; z-index:1; width:100%} */
.droplayer .real-search{width:100%; border:0 !important; border-bottom:var(--border) !important; height:48px; background:url('/images/ico_dropdown_search.svg') no-repeat right 12px center / 12px !important; padding-right:40px !important; border-radius:0 !important}
.droplayer .real-search::placeholder{color:#DDD}
.droplayer .dropdown-lists{box-sizing:border-box; background-color:#FFF}
.droplayer .listbox{max-height:240px; overflow-y:auto; padding:5px 0}
.droplayer .listbox::-webkit-scrollbar{width:6px}
.droplayer .listbox::-webkit-scrollbar-thumb{background-color:#DDD}
.droplayer .listbox::-webkit-scrollbar-track{background-color:#FFF}
.droplayer .listbox span{color:black; text-decoration:none; display:block; padding:6px 5px 6px 15px; cursor:pointer}
.droplayer .listbox span:hover{background-color:rgba(0,0,0,0.04)}
.droplayer #droplist.show{display:block}



/* done ---------- */
.write-done{text-align:center; max-width:450px; margin:0 auto; padding-top:48px; padding-bottom:48px}
.write-done .title{font-size:20px; font-weight:500}
.write-done .title::before{content:''; display:block; width:100%; height:120px; background:url('/images/write_done_img1.png') no-repeat center / contain; margin:0 auto 16px}
.write-done .desc{font-size:16px; color:var(--color-gray-light); margin-top:4px}
.write-done .btns{margin-top:30px}
@media (min-width:1070px){
  .write-done{padding-top:112px; padding-bottom:112px}
  .write-done .title{font-size:24px}
  .write-done .title::before{height:150px}
}
/* image */
.write-done .title.img1::before{background-image:url('/images/write_done_img1.png')}
.write-done .title.img2::before{background-image:url('/images/write_done_img2.png')}




/*----------------------------------------------------
POP
----------------------------------------------------*/
/* common ---------- */
.pop{background:rgba(0,0,0,0.3); position:fixed; top:0; left:0; z-index:9999; width:100%; height:100%; transition:all 0.15s ease}

.pop .popin{position:absolute; left:0; bottom:0; overflow:hidden; border-radius:24px 24px 0 0; background:#FFF; box-shadow:0 12px 25px 0 rgba(0,0,0,0.15); padding:40px; text-align:center; width:100%; transition:all 0.2s ease; transform:translateY(100%)}
.pop.active .popin{transform:translateY(0)}

.pop .title{font-size:20px; font-weight:600}
.pop .title::before{content:''; display:block; width:64px; height:64px; background:no-repeat center / contain; margin:0 auto 12px}
.pop .desc{font-size:15px; color:var(--color-gray-light); margin-top:var(--unit-050)}
.pop .btns{margin-top:var(--unit-400)}

@media(min-width:460px){
  .pop{transition:none; padding:20px}
  .pop.active{display:flex; align-items:center; justify-content:center}
  .pop .popin{position:relative; transition:none; transform:translateY(0)}
  .pop{align-items:center}
  .pop .popin{padding:60px; border-radius:24px; width:420px}
}
/* icon */
.pop-warning .title::before{background-image:url('/images/ico_warning.svg'); width:32px; height:32px}
.pop-delete .title::before{background-image:url('/images/ico_pop_trash.svg')}
/* .pop-like-delete .title::before{background-image:url('/images/ico_pop_like.svg')} */