/*══════════════════════════════════════════════════════════════════════════*\
   HackYa_17 — components.css
   Combined 2026-10-28 from six small stylesheets (one request instead of six).
   Every rule and comment is kept exactly as it was in its old file; only
   these section banners were added. Comments inside a section that mention
   an old file name (e.g. "styled in sidebar.css") refer to that section below.

   Load order: after hackya_style.css, header.css and header_responsive.css,
   before elder-mode.css (see inc/theme-setup.php). The sections keep the
   order the old files loaded in (icons moved to the front: it shares no
   selectors with the side panel), so which rule wins is unchanged.
   Section 3 must stay after section 2 (both set .top-nav-hidden).

   TABLE OF CONTENTS                                   (was)
     1. Icons                                          icons.css
     2. Side panel — content                           sidebar.css
     3. Side panel — position & 3D tilt                perspective.css
     4. Footer, audio player & site-wide bits          footer.css
     5. Comments                                       comments.css
     6. Blog post list                                 blog-list.css

   Find a section fast: search for "SECTION 3" (etc.).
\*══════════════════════════════════════════════════════════════════════════*/


/*══════════════════════════════════════════════════════════════════════════*\
   SECTION 1 — ICONS
   (was icons.css)
   Inline-SVG icon classes (icon-cog, icon-calendar, icon-price-tags…).
   Used by post info lines, footer email and the weather widget.
\*══════════════════════════════════════════════════════════════════════════*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
   HackYa_17 — Icon Replacement via Inline SVG
   Phosphor Icons paths (MIT License)
   No font files required — pure CSS + SVG
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Base: all icon- classes become inline-block pseudo-elements */
[class^='icon-']:before,
[class*=' icon-']:before {
    display: inline-block;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: -0.15em;
}

/* settings */
.icon-cog:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232%20128a104.1%20104.1%200%200%201-2.87%2023.94l-35.1-20.26a68.78%2068.78%200%200%200%200-7.36l35.11-20.27A104.12%20104.12%200%200%201%20232%20128Zm-44.54%2060.47-35.1-20.27a68%2068%200%200%201-6.36%203.68l-8.27%2037.86a104%20104%200%200%200%2049.73-21.27Zm-72.44%2027.27L106.75%20179a68.61%2068.61%200%200%201-7.35%200L79.14%20214.1a104.12%20104.12%200%200%200%2035.86%201.64Zm-35.86%201.64%2020.27-35.1A68%2068%200%200%201%2096%20178.6l-37.86-8.27a104%20104%200%200%200%2021.28%2049.74ZM41.74%20172.46A104%20104%200%200%201%2024%20128a104.1%20104.1%200%200%201%202.87-23.94l35.1%2020.26a68.78%2068.78%200%200%200%200%207.36L26.86%20152Zm85.81-108.72L149.25%2077a68%2068%200%200%201%206.36-3.68l8.27-37.86a104%20104%200%200%200-49.73%2021.27ZM128%2088a40%2040%200%201%200%2040%2040%2040%2040%200%200%200-40-40Zm0%2064a24%2024%200%201%201%2024-24%2024%2024%200%200%201-24%2024Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232%20128a104.1%20104.1%200%200%201-2.87%2023.94l-35.1-20.26a68.78%2068.78%200%200%200%200-7.36l35.11-20.27A104.12%20104.12%200%200%201%20232%20128Zm-44.54%2060.47-35.1-20.27a68%2068%200%200%201-6.36%203.68l-8.27%2037.86a104%20104%200%200%200%2049.73-21.27Zm-72.44%2027.27L106.75%20179a68.61%2068.61%200%200%201-7.35%200L79.14%20214.1a104.12%20104.12%200%200%200%2035.86%201.64Zm-35.86%201.64%2020.27-35.1A68%2068%200%200%201%2096%20178.6l-37.86-8.27a104%20104%200%200%200%2021.28%2049.74ZM41.74%20172.46A104%20104%200%200%201%2024%20128a104.1%20104.1%200%200%201%202.87-23.94l35.1%2020.26a68.78%2068.78%200%200%200%200%207.36L26.86%20152Zm85.81-108.72L149.25%2077a68%2068%200%200%201%206.36-3.68l8.27-37.86a104%20104%200%200%200-49.73%2021.27ZM128%2088a40%2040%200%201%200%2040%2040%2040%2040%200%200%200-40-40Zm0%2064a24%2024%200%201%201%2024-24%2024%2024%200%200%201-24%2024Z%22/%3E%3C/svg%3E");
}

/* user */
.icon-hackya_user:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M230.92%20212c-15.23-26.33-37.57-45.7-63.4-54.19a72%2072%200%201%200-79%200C62.65%20166.29%2040.3%20185.66%2025.08%20212a8%208%200%201%200%2013.85%208c18.84-32.56%2052.14-52%2089.07-52s70.23%2019.44%2089.07%2052a8%208%200%201%200%2013.85-8ZM72%2096a56%2056%200%201%201%2056%2056A56.06%2056.06%200%200%201%2072%2096Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M230.92%20212c-15.23-26.33-37.57-45.7-63.4-54.19a72%2072%200%201%200-79%200C62.65%20166.29%2040.3%20185.66%2025.08%20212a8%208%200%201%200%2013.85%208c18.84-32.56%2052.14-52%2089.07-52s70.23%2019.44%2089.07%2052a8%208%200%201%200%2013.85-8ZM72%2096a56%2056%200%201%201%2056%2056A56.06%2056.06%200%200%201%2072%2096Z%22/%3E%3C/svg%3E");
}

/* calendar */
/* calendar — from uploaded calendar-outline.svg (converted to fills for mask) */
.icon-post_date:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M368%2048h-16V32a16%2016%200%2000-32%200v16H192V32a16%2016%200%2000-32%200v16h-16A64%2064%200%200080%20112v304a64%2064%200%200064%2064h224a64%2064%200%200064-64V112a64%2064%200%2000-64-64zm32%20368a32%2032%200%2001-32%2032H144a32%2032%200%2001-32-32V192h288zM400%20160H112v-48a32%2032%200%200132-32h16v16a16%2016%200%200032%200v-16h128v16a16%2016%200%200032%200v-16h16a32%2032%200%200132%2032z%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22248%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22376%22%20cy%3D%22248%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22328%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22376%22%20cy%3D%22328%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22136%22%20cy%3D%22328%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22216%22%20cy%3D%22328%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22136%22%20cy%3D%22408%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22216%22%20cy%3D%22408%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22408%22%20r%3D%2224%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M368%2048h-16V32a16%2016%200%2000-32%200v16H192V32a16%2016%200%2000-32%200v16h-16A64%2064%200%200080%20112v304a64%2064%200%200064%2064h224a64%2064%200%200064-64V112a64%2064%200%2000-64-64zm32%20368a32%2032%200%2001-32%2032H144a32%2032%200%2001-32-32V192h288zM400%20160H112v-48a32%2032%200%200132-32h16v16a16%2016%200%200032%200v-16h128v16a16%2016%200%200032%200v-16h16a32%2032%200%200132%2032z%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22248%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22376%22%20cy%3D%22248%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22328%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22376%22%20cy%3D%22328%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22136%22%20cy%3D%22328%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22216%22%20cy%3D%22328%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22136%22%20cy%3D%22408%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22216%22%20cy%3D%22408%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22408%22%20r%3D%2224%22%2F%3E%3C%2Fsvg%3E");
}

/* price tags — from uploaded price-tags.svg */
.icon-post_category:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%3E%3Cpath%20d%3D%22M492%2C52.3H336.3c-10.4%2C0-26%2C5.9-33.4%2C14.1L109.4%2C259.2c-7.4%2C7.4-7.4%2C20%2C0%2C27.4l167.6%2C167.6c7.4%2C7.4%2C20%2C7.4%2C27.4%2C0l193.5-193.5c7.4-7.4%2C14.1-22.2%2C14.1-33.4V71.6C511.3%2C61.2%2C502.4%2C52.3%2C492%2C52.3z%20M394.1%2C208c-21.5%2C0-39.3-17.8-39.3-39.3s17.8-39.3%2C39.3-39.3c21.5%2C0%2C39.3%2C17.8%2C39.3%2C39.3S415.6%2C208%2C394.1%2C208z%22%2F%3E%3Cpath%20d%3D%22M43.4%2C273.2l221-221h-32.6c-10.4%2C0-26%2C5.9-33.4%2C14.1L5.6%2C259.2c-7.4%2C7.4-7.4%2C20%2C0%2C27.4l167.6%2C167.6c7.4%2C7.4%2C20%2C7.4%2C27.4%2C0l11.9-11.9L43.4%2C273.2L43.4%2C273.2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%3E%3Cpath%20d%3D%22M492%2C52.3H336.3c-10.4%2C0-26%2C5.9-33.4%2C14.1L109.4%2C259.2c-7.4%2C7.4-7.4%2C20%2C0%2C27.4l167.6%2C167.6c7.4%2C7.4%2C20%2C7.4%2C27.4%2C0l193.5-193.5c7.4-7.4%2C14.1-22.2%2C14.1-33.4V71.6C511.3%2C61.2%2C502.4%2C52.3%2C492%2C52.3z%20M394.1%2C208c-21.5%2C0-39.3-17.8-39.3-39.3s17.8-39.3%2C39.3-39.3c21.5%2C0%2C39.3%2C17.8%2C39.3%2C39.3S415.6%2C208%2C394.1%2C208z%22%2F%3E%3Cpath%20d%3D%22M43.4%2C273.2l221-221h-32.6c-10.4%2C0-26%2C5.9-33.4%2C14.1L5.6%2C259.2c-7.4%2C7.4-7.4%2C20%2C0%2C27.4l167.6%2C167.6c7.4%2C7.4%2C20%2C7.4%2C27.4%2C0l11.9-11.9L43.4%2C273.2L43.4%2C273.2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* speech bubble */
.icon-post_comment:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C0%2C0%2C36.18%2C176.88L24.83%2C210.93a16%2C16%2C0%2C0%2C0%2C20.24%2C20.24l34.05-11.35A104%2C104%2C0%2C1%2C0%2C128%2C24Zm0%2C192a88.11%2C88.11%2C0%2C0%2C1-45.06-12.38%2C8%2C8%2C0%2C0%2C0-6.54-.67L40%2C216l12.99-36.4a8%2C8%2C0%2C0%2C0-.68-6.54A88%2C88%2C0%2C1%2C1%2C128%2C216Z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C0%2C0%2C36.18%2C176.88L24.83%2C210.93a16%2C16%2C0%2C0%2C0%2C20.24%2C20.24l34.05-11.35A104%2C104%2C0%2C1%2C0%2C128%2C24Zm0%2C192a88.11%2C88.11%2C0%2C0%2C1-45.06-12.38%2C8%2C8%2C0%2C0%2C0-6.54-.67L40%2C216l12.99-36.4a8%2C8%2C0%2C0%2C0-.68-6.54A88%2C88%2C0%2C1%2C1%2C128%2C216Z%22%2F%3E%3C%2Fsvg%3E");
}

/* email */
.icon-email:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M224%2048H32a8%208%200%200%200-8%208v136a16%2016%200%200%200%2016%2016h176a16%2016%200%200%200%2016-16V56a8%208%200%200%200-8-8ZM203.43%2064%20128%20133.15%2052.57%2064ZM216%20192H40V74.19l82.59%2075.71a8%208%200%200%200%2010.82%200L216%2074.19V192Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M224%2048H32a8%208%200%200%200-8%208v136a16%2016%200%200%200%2016%2016h176a16%2016%200%200%200%2016-16V56a8%208%200%200%200-8-8ZM203.43%2064%20128%20133.15%2052.57%2064ZM216%20192H40V74.19l82.59%2075.71a8%208%200%200%200%2010.82%200L216%2074.19V192Z%22/%3E%3C/svg%3E");
}

/* home */
.icon-home:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M219.31%20108.68l-80-80a16%2016%200%200%200-22.62%200l-80%2080A15.87%2015.87%200%200%200%2032%20120v96a8%208%200%200%200%208%208h72a8%208%200%200%200%208-8v-56h48v56a8%208%200%200%200%208%208h72a8%208%200%200%200%208-8v-96a15.87%2015.87%200%200%200-4.69-11.32ZM208%20208h-56v-56a8%208%200%200%200-8-8h-48a8%208%200%200%200-8%208v56H48v-88l80-80%2080%2080v88Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M219.31%20108.68l-80-80a16%2016%200%200%200-22.62%200l-80%2080A15.87%2015.87%200%200%200%2032%20120v96a8%208%200%200%200%208%208h72a8%208%200%200%200%208-8v-56h48v56a8%208%200%200%200%208%208h72a8%208%200%200%200%208-8v-96a15.87%2015.87%200%200%200-4.69-11.32ZM208%20208h-56v-56a8%208%200%200%200-8-8h-48a8%208%200%200%200-8%208v56H48v-88l80-80%2080%2080v88Z%22/%3E%3C/svg%3E");
}

/* lock */
.icon-lock:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M208%2080h-32V56a48%2048%200%200%200-96%200v24H48A16%2016%200%200%200%2032%2096v112a16%2016%200%200%200%2016%2016h160a16%2016%200%200%200%2016-16V96a16%2016%200%200%200-16-16ZM96%2056a32%2032%200%200%201%2064%200v24H96Zm112%20152H48V96h160v112Zm-80-80a8%208%200%200%200-8%208v24a8%208%200%200%200%2016%200v-24a8%208%200%200%200-8-8Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M208%2080h-32V56a48%2048%200%200%200-96%200v24H48A16%2016%200%200%200%2032%2096v112a16%2016%200%200%200%2016%2016h160a16%2016%200%200%200%2016-16V96a16%2016%200%200%200-16-16ZM96%2056a32%2032%200%200%201%2064%200v24H96Zm112%20152H48V96h160v112Zm-80-80a8%208%200%200%200-8%208v24a8%208%200%200%200%2016%200v-24a8%208%200%200%200-8-8Z%22/%3E%3C/svg%3E");
}

/* play */
.icon-play3:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M240%20128a15.74%2015.74%200%200%201-7.6%2013.51L88.32%20229.65a16%2016%200%200%201-16.2.3A15.86%2015.86%200%200%201%2064%20216.13V39.87a15.86%2015.86%200%200%201%208.12-13.82%2016%2016%200%200%201%2016.2.3l144.08%2088.14A15.74%2015.74%200%200%201%20240%20128Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M240%20128a15.74%2015.74%200%200%201-7.6%2013.51L88.32%20229.65a16%2016%200%200%201-16.2.3A15.86%2015.86%200%200%201%2064%20216.13V39.87a15.86%2015.86%200%200%201%208.12-13.82%2016%2016%200%200%201%2016.2.3l144.08%2088.14A15.74%2015.74%200%200%201%20240%20128Z%22/%3E%3C/svg%3E");
}

/* pause */
.icon-pause2:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M200%2032h-32a16%2016%200%200%200-16%2016v160a16%2016%200%200%200%2016%2016h32a16%2016%200%200%200%2016-16V48a16%2016%200%200%200-16-16Zm0%20176h-32V48h32ZM88%2032H56a16%2016%200%200%200-16%2016v160a16%2016%200%200%200%2016%2016h32a16%2016%200%200%200%2016-16V48a16%2016%200%200%200-16-16Zm0%20176H56V48h32Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M200%2032h-32a16%2016%200%200%200-16%2016v160a16%2016%200%200%200%2016%2016h32a16%2016%200%200%200%2016-16V48a16%2016%200%200%200-16-16Zm0%20176h-32V48h32ZM88%2032H56a16%2016%200%200%200-16%2016v160a16%2016%200%200%200%2016%2016h32a16%2016%200%200%200%2016-16V48a16%2016%200%200%200-16-16Zm0%20176H56V48h32Z%22/%3E%3C/svg%3E");
}

/* volume */
.icon-volume-high:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M155.51%2024.81a8%208%200%200%200-8.42.88L77.25%2080H32A16%2016%200%200%200%2016%2096v64a16%2016%200%200%200%2016%2016h45.25l69.84%2054.31A8%208%200%200%200%20160%20224V32a8%208%200%200%200-4.49-7.19ZM144%20207.64l-60.4-46.9A8%208%200%200%200%2078.73%20159H32V97h46.73a8%208%200%200%200%204.87-1.64L144%2048.36ZM196%20128a40%2040%200%200%201-10.29%2027%208%208%200%200%201-11.86-10.8A24%2024%200%200%200%20196%20128a24%2024%200%200%200-22.15-23.94%208%208%200%201%201%201.47-15.94A40%2040%200%200%201%20196%20128Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M155.51%2024.81a8%208%200%200%200-8.42.88L77.25%2080H32A16%2016%200%200%200%2016%2096v64a16%2016%200%200%200%2016%2016h45.25l69.84%2054.31A8%208%200%200%200%20160%20224V32a8%208%200%200%200-4.49-7.19ZM144%20207.64l-60.4-46.9A8%208%200%200%200%2078.73%20159H32V97h46.73a8%208%200%200%200%204.87-1.64L144%2048.36ZM196%20128a40%2040%200%200%201-10.29%2027%208%208%200%200%201-11.86-10.8A24%2024%200%200%200%20196%20128a24%2024%200%200%200-22.15-23.94%208%208%200%201%201%201.47-15.94A40%2040%200%200%201%20196%20128Z%22/%3E%3C/svg%3E");
}

/* mute */
.icon-volume-mute:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M155.51%2024.81a8%208%200%200%200-8.42.88L77.25%2080H32A16%2016%200%200%200%2016%2096v64a16%2016%200%200%200%2016%2016h45.25l69.84%2054.31A8%208%200%200%200%20160%20224V32a8%208%200%200%200-4.49-7.19ZM144%20207.64l-60.4-46.9A8%208%200%200%200%2078.73%20159H32V97h46.73a8%208%200%200%200%204.87-1.64L144%2048.36Zm98.34-61-18.35-18.35%2018.35-18.35a8%208%200%200%200-11.32-11.31L212.68%20117%20194.34%2098.7a8%208%200%200%200-11.31%2011.31L201.36%20128l-18.33%2018.33a8%208%200%200%200%2011.31%2011.31l18.34-18.34%2018.35%2018.35a8%208%200%200%200%2011.31-11.31Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M155.51%2024.81a8%208%200%200%200-8.42.88L77.25%2080H32A16%2016%200%200%200%2016%2096v64a16%2016%200%200%200%2016%2016h45.25l69.84%2054.31A8%208%200%200%200%20160%20224V32a8%208%200%200%200-4.49-7.19ZM144%20207.64l-60.4-46.9A8%208%200%200%200%2078.73%20159H32V97h46.73a8%208%200%200%200%204.87-1.64L144%2048.36Zm98.34-61-18.35-18.35%2018.35-18.35a8%208%200%200%200-11.32-11.31L212.68%20117%20194.34%2098.7a8%208%200%200%200-11.31%2011.31L201.36%20128l-18.33%2018.33a8%208%200%200%200%2011.31%2011.31l18.34-18.34%2018.35%2018.35a8%208%200%200%200%2011.31-11.31Z%22/%3E%3C/svg%3E");
}

/* rss */
.icon-rss:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M231.88%20175.06A136.13%20136.13%200%200%200%20128%2024a8%208%200%200%200%200%2016A120.12%20120.12%200%200%201%20248%20160a120.85%20120.85%200%200%201-3.56%2029.16%208%208%200%200%200%2015.51%203.9A137%20137%200%200%200%20263.88%20175Zm-48.07%2013.2A72.08%2072.08%200%200%200%20128%20120a8%208%200%200%200%200%2016%2056.06%2056.06%200%200%201%2056%2056%2056.91%2056.91%200%200%201-.68%208.68%208%208%200%200%200%206.79%209.05%208.08%208.08%200%200%200%201.14.08A8%208%200%200%200%20199%20203a72.92%2072.92%200%200%200%20.88-11.28A72.22%2072.22%200%200%200%20183.81%20188.26ZM48%20176a24%2024%200%201%200%2024%2024%2024%2024%200%200%200-24-24Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M231.88%20175.06A136.13%20136.13%200%200%200%20128%2024a8%208%200%200%200%200%2016A120.12%20120.12%200%200%201%20248%20160a120.85%20120.85%200%200%201-3.56%2029.16%208%208%200%200%200%2015.51%203.9A137%20137%200%200%200%20263.88%20175Zm-48.07%2013.2A72.08%2072.08%200%200%200%20128%20120a8%208%200%200%200%200%2016%2056.06%2056.06%200%200%201%2056%2056%2056.91%2056.91%200%200%201-.68%208.68%208%208%200%200%200%206.79%209.05%208.08%208.08%200%200%200%201.14.08A8%208%200%200%200%20199%20203a72.92%2072.92%200%200%200%20.88-11.28A72.22%2072.22%200%200%200%20183.81%20188.26ZM48%20176a24%2024%200%201%200%2024%2024%2024%2024%200%200%200-24-24Z%22/%3E%3C/svg%3E");
}

/* share */
.icon-share2:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M176%20160a40%2040%200%200%200-28.73%2012.14l-47.25-30.21a39.7%2039.7%200%200%200%200-27.86l47.25-30.21a40.07%2040.07%200%201%200-8.5-13.29L91.52%20100.78a40%2040%200%201%200%200%2054.44l47.25%2030.21A40%2040%200%201%200%20176%20160Zm0-144a24%2024%200%201%201-24%2024%2024%2024%200%200%201%2024-24ZM64%20152a24%2024%200%201%201%2024-24%2024%2024%200%200%201-24%2024Zm112%2072a24%2024%200%201%201%2024-24%2024%2024%200%200%201-24%2024Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M176%20160a40%2040%200%200%200-28.73%2012.14l-47.25-30.21a39.7%2039.7%200%200%200%200-27.86l47.25-30.21a40.07%2040.07%200%201%200-8.5-13.29L91.52%20100.78a40%2040%200%201%200%200%2054.44l47.25%2030.21A40%2040%200%201%200%20176%20160Zm0-144a24%2024%200%201%201-24%2024%2024%2024%200%200%201%2024-24ZM64%20152a24%2024%200%201%201%2024-24%2024%2024%200%200%201-24%2024Zm112%2072a24%2024%200%201%201%2024-24%2024%2024%200%200%201-24%2024Z%22/%3E%3C/svg%3E");
}

/* facebook */
.icon-facebook2:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.12%20104.12%200%200%200%20128%2024Zm8%20191.63V152h24a8%208%200%200%200%200-16H136v-24a16%2016%200%200%201%2016-16h16a8%208%200%200%200%200-16H152a32%2032%200%200%200-32%2032v24H96a8%208%200%200%200%200%2016h24v63.63A88.2%2088.2%200%200%201%2040%20128a88%2088%200%201%201%20176%200%2088.2%2088.2%200%200%201-80%2087.63Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.12%20104.12%200%200%200%20128%2024Zm8%20191.63V152h24a8%208%200%200%200%200-16H136v-24a16%2016%200%200%201%2016-16h16a8%208%200%200%200%200-16H152a32%2032%200%200%200-32%2032v24H96a8%208%200%200%200%200%2016h24v63.63A88.2%2088.2%200%200%201%2040%20128a88%2088%200%201%201%20176%200%2088.2%2088.2%200%200%201-80%2087.63Z%22/%3E%3C/svg%3E");
}

/* X/twitter */
.icon-twitter:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M214.75%20211.071l-82.54-106.76%2075.11-81.57A8.001%208.001%200%201%200%20195.5%2012.27l-69.59%2075.56-55.69-71.97A8%208%200%200%200%2064%2012H32a8%208%200%200%200-6.27%2012.93l82.54%20106.76-75.11%2081.57a8%208%200%201%200%2011.82%2010.76l69.59-75.56%2055.69%2071.97A8%208%200%200%200%20176%20224h32a8%208%200%200%200%206.27-12.929ZM186.63%20208L49.41%2048h19.96l137.22%20160Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M214.75%20211.071l-82.54-106.76%2075.11-81.57A8.001%208.001%200%201%200%20195.5%2012.27l-69.59%2075.56-55.69-71.97A8%208%200%200%200%2064%2012H32a8%208%200%200%200-6.27%2012.93l82.54%20106.76-75.11%2081.57a8%208%200%201%200%2011.82%2010.76l69.59-75.56%2055.69%2071.97A8%208%200%200%200%20176%20224h32a8%208%200%200%200%206.27-12.929ZM186.63%20208L49.41%2048h19.96l137.22%20160Z%22/%3E%3C/svg%3E");
}

/* caret-down */
.icon-caret_down:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M213.66%20101.66l-80%2080a8%208%200%200%201-11.32%200l-80-80A8%208%200%200%201%2048%2088h160a8%208%200%200%201%205.66%2013.66Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M213.66%20101.66l-80%2080a8%208%200%200%201-11.32%200l-80-80A8%208%200%200%201%2048%2088h160a8%208%200%200%201%205.66%2013.66Z%22/%3E%3C/svg%3E");
}

/* chevron-right */
.icon-chevron-right:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M181.66%20133.66l-80%2080a8%208%200%200%201-11.32-11.32L164.69%20128%2090.34%2053.66a8%208%200%200%201%2011.32-11.32l80%2080a8%208%200%200%201%200%2011.32Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M181.66%20133.66l-80%2080a8%208%200%200%201-11.32-11.32L164.69%20128%2090.34%2053.66a8%208%200%200%201%2011.32-11.32l80%2080a8%208%200%200%201%200%2011.32Z%22/%3E%3C/svg%3E");
}

/* chevron-left */
.icon-chevron-left:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M165.66%20202.34a8%208%200%200%201-11.32%2011.32l-80-80a8%208%200%200%201%200-11.32l80-80a8%208%200%200%201%2011.32%2011.32L91.31%20128Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M165.66%20202.34a8%208%200%200%201-11.32%2011.32l-80-80a8%208%200%200%201%200-11.32l80-80a8%208%200%200%201%2011.32%2011.32L91.31%20128Z%22/%3E%3C/svg%3E");
}

/* caret-up */
.icon-up-open_chevron:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M213.66%20165.66a8%208%200%200%201-11.32%200L128%2091.31l-74.34%2074.35a8%208%200%200%201-11.32-11.32l80-80a8%208%200%200%201%2011.32%200l80%2080a8%208%200%200%201%200%2011.32Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M213.66%20165.66a8%208%200%200%201-11.32%200L128%2091.31l-74.34%2074.35a8%208%200%200%201-11.32-11.32l80-80a8%208%200%200%201%2011.32%200l80%2080a8%208%200%200%201%200%2011.32Z%22/%3E%3C/svg%3E");
}

/* headphones */
.icon-headphone_sc:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M201.41%2057.41A103.93%20103.93%200%200%200%2024.07%20128a101.47%20101.47%200%200%200%201.41%2016.8%2024%2024%200%200%200-1.48%2040%2024%2024%200%200%200%2024-24v-1.89a96%2096%200%201%201%20160%200V160a24%2024%200%200%200%2024%2024%2024%2024%200%200%200-1.48-40A101.47%20101.47%200%200%200%20232%20128a103.9%20103.9%200%200%200-30.59-70.59ZM40%20160a8%208%200%201%201%208-8%208%208%200%200%201-8%208Zm176%200a8%208%200%201%201%208-8%208%208%200%200%201-8%208Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M201.41%2057.41A103.93%20103.93%200%200%200%2024.07%20128a101.47%20101.47%200%200%200%201.41%2016.8%2024%2024%200%200%200-1.48%2040%2024%2024%200%200%200%2024-24v-1.89a96%2096%200%201%201%20160%200V160a24%2024%200%200%200%2024%2024%2024%2024%200%200%200-1.48-40A101.47%20101.47%200%200%200%20232%20128a103.9%20103.9%200%200%200-30.59-70.59ZM40%20160a8%208%200%201%201%208-8%208%208%200%200%201-8%208Zm176%200a8%208%200%201%201%208-8%208%208%200%200%201-8%208Z%22/%3E%3C/svg%3E");
}

/* code */
.icon-embed2:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M75.14%20220.61a8%208%200%200%200%202.86.51%208%208%200%200%200%207.49-5.14l72-192a8%208%200%201%200-14.98-5.96l-72%20192a8%208%200%200%200%204.63%2010.59ZM165.66%20141.66l36.68-36.67-36.68-36.67a8%208%200%200%201%2011.32-11.32l42.67%2042.66a8%208%200%200%201%200%2011.32l-42.67%2042.66a8%208%200%200%201-11.32-11.32Zm-75.32%200A8%208%200%200%201%2079%20153.32L36.34%20110.66a8%208%200%200%201%200-11.32L79%2057a8%208%200%200%201%2011.31%2011.27L53.65%20105l36.69%2036.65a8%208%200%200%201%200%2011.01Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M75.14%20220.61a8%208%200%200%200%202.86.51%208%208%200%200%200%207.49-5.14l72-192a8%208%200%201%200-14.98-5.96l-72%20192a8%208%200%200%200%204.63%2010.59ZM165.66%20141.66l36.68-36.67-36.68-36.67a8%208%200%200%201%2011.32-11.32l42.67%2042.66a8%208%200%200%201%200%2011.32l-42.67%2042.66a8%208%200%200%201-11.32-11.32Zm-75.32%200A8%208%200%200%201%2079%20153.32L36.34%20110.66a8%208%200%200%201%200-11.32L79%2057a8%208%200%200%201%2011.31%2011.27L53.65%20105l36.69%2036.65a8%208%200%200%201%200%2011.01Z%22/%3E%3C/svg%3E");
}

/* pencil */
.icon-pen:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M227.32%2073.37%20182.63%2028.69a16%2016%200%200%200-22.63%200L36.69%20152a15.86%2015.86%200%200%200-4.69%2011.31V208a16%2016%200%200%200%2016%2016H216a8%208%200%200%200%200-16H115.32l112-112a16%2016%200%200%200%200-22.63Zm-57.37%2030.16L130.53%2064.1%20171.31%2023.31%20211.7%2063.69Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M227.32%2073.37%20182.63%2028.69a16%2016%200%200%200-22.63%200L36.69%20152a15.86%2015.86%200%200%200-4.69%2011.31V208a16%2016%200%200%200%2016%2016H216a8%208%200%200%200%200-16H115.32l112-112a16%2016%200%200%200%200-22.63Zm-57.37%2030.16L130.53%2064.1%20171.31%2023.31%20211.7%2063.69Z%22/%3E%3C/svg%3E");
}

/* spinner */
.icon-spinner:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232%20128a104%20104%200%200%201-208%200c0-41%2023.81-78.36%2060.63-96.27a8%208%200%200%201%206.85%2014.44C60.07%2061.39%2040%2093.57%2040%20128a88%2088%200%200%200%20176%200c0-34.43-20.07-66.61-51.48-81.83a8%208%200%200%201%206.85-14.44C208.19%2049.64%20232%2086.98%20232%20128Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232%20128a104%20104%200%200%201-208%200c0-41%2023.81-78.36%2060.63-96.27a8%208%200%200%201%206.85%2014.44C60.07%2061.39%2040%2093.57%2040%20128a88%2088%200%200%200%20176%200c0-34.43-20.07-66.61-51.48-81.83a8%208%200%200%201%206.85-14.44C208.19%2049.64%20232%2086.98%20232%20128Z%22/%3E%3C/svg%3E");
}

/* arrows */
.icon-switch:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M224%20128a8%208%200%200%201-8%208H64.49l34.75%2037.4a8%208%200%201%201-11.7%2010.87l-48-51.6a8%208%200%200%201%200-10.87l48-51.6a8%208%200%201%201%2011.7%2010.87L64.49%20120H216a8%208%200%200%201%208%208Zm-37.24-92.87a8%208%200%201%200-11.7%2010.87L209.51%2084H58a8%208%200%200%200%200%2016h152a8%208%200%200%200%205.49-2.13Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M224%20128a8%208%200%200%201-8%208H64.49l34.75%2037.4a8%208%200%201%201-11.7%2010.87l-48-51.6a8%208%200%200%201%200-10.87l48-51.6a8%208%200%201%201%2011.7%2010.87L64.49%20120H216a8%208%200%200%201%208%208Zm-37.24-92.87a8%208%200%201%200-11.7%2010.87L209.51%2084H58a8%208%200%200%200%200%2016h152a8%208%200%200%200%205.49-2.13Z%22/%3E%3C/svg%3E");
}

/* globe */
.icon-language_switcher:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.11%20104.11%200%200%200%20128%2024Zm-16%2016.89V56a16%2016%200%200%200-32%200v8H52.91a88.26%2088.26%200%200%201%2059.09-23.11ZM48%2080h32v16H56c-.71%202.61-1.33%205.26-1.85%208H48Zm80%20144c-48.52%200-88-39.48-88-88s39.48-88%2088-88%2088%2039.48%2088%2088-39.48%2088-88%2088Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.11%20104.11%200%200%200%20128%2024Zm-16%2016.89V56a16%2016%200%200%200-32%200v8H52.91a88.26%2088.26%200%200%201%2059.09-23.11ZM48%2080h32v16H56c-.71%202.61-1.33%205.26-1.85%208H48Zm80%20144c-48.52%200-88-39.48-88-88s39.48-88%2088-88%2088%2039.48%2088%2088-39.48%2088-88%2088Z%22/%3E%3C/svg%3E");
}

/* clock */
.icon-time:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.12%20104.12%200%200%200%20128%2024Zm0%20192a88%2088%200%201%201%2088-88%2088.1%2088.1%200%200%201-88%2088Zm64-88a8%208%200%200%201-8%208h-56a8%208%200%200%201-8-8V72a8%208%200%200%201%2016%200v48h48a8%208%200%200%201%208%208Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.12%20104.12%200%200%200%20128%2024Zm0%20192a88%2088%200%201%201%2088-88%2088.1%2088.1%200%200%201-88%2088Zm64-88a8%208%200%200%201-8%208h-56a8%208%200%200%201-8-8V72a8%208%200%200%201%2016%200v48h48a8%208%200%200%201%208%208Z%22/%3E%3C/svg%3E");
}

/* globe-simple */
.icon-wordpress:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.12%20104.12%200%200%200%20128%2024Zm88%20104a87.5%2087.5%200%200%201-6.1%2032.47L155.71%20128H176a8%208%200%200%200%200-16h-56a8%208%200%200%200%200%2016h13.47l-30.82%2077.05L70.47%20128H80a8%208%200%200%200%200-16H40.59A88%2088%200%200%201%20128%2040a87.5%2087.5%200%200%201%2048%2014.23V56a8%208%200%200%200%200%2016h16v16a8%208%200%200%200%2016%200V72h8a8%208%200%200%200%200-16h-2.57A88.08%2088.08%200%200%201%20216%20128Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.12%20104.12%200%200%200%20128%2024Zm88%20104a87.5%2087.5%200%200%201-6.1%2032.47L155.71%20128H176a8%208%200%200%200%200-16h-56a8%208%200%200%200%200%2016h13.47l-30.82%2077.05L70.47%20128H80a8%208%200%200%200%200-16H40.59A88%2088%200%200%201%20128%2040a87.5%2087.5%200%200%201%2048%2014.23V56a8%208%200%200%200%200%2016h16v16a8%208%200%200%200%2016%200V72h8a8%208%200%200%200%200-16h-2.57A88.08%2088.08%200%200%201%20216%20128Z%22/%3E%3C/svg%3E");
}

/* music-note */
.icon-soundcloud:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M24%20128a104%20104%200%201%200%20104-104A104.12%20104.12%200%200%200%2024%20128Zm88-40a40%2040%200%201%201%200%2080%208%208%200%200%201%200-16%2024%2024%200%201%200-24-24%208%208%200%200%201-16%200%2040%2040%200%200%201%2040-40Zm-56%2040a8%208%200%200%201-16%200%2072%2072%200%200%201%20144%200%208%208%200%200%201-16%200%2056%2056%200%200%200-112%200Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M24%20128a104%20104%200%201%200%20104-104A104.12%20104.12%200%200%200%2024%20128Zm88-40a40%2040%200%201%201%200%2080%208%208%200%200%201%200-16%2024%2024%200%201%200-24-24%208%208%200%200%201-16%200%2040%2040%200%200%201%2040-40Zm-56%2040a8%208%200%200%201-16%200%2072%2072%200%200%201%20144%200%208%208%200%200%201-16%200%2056%2056%200%200%200-112%200Z%22/%3E%3C/svg%3E");
}

/* whatsapp */
.icon-whatsapp-icon:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M187.58%20124.23c-3.16-1.61-18.67-9.29-21.58-10.36s-5-1.6-7.11%201.6-8.15%2010.36-10%2012.47-3.7%202.41-6.85.8-13.39-4.95-25.49-15.79c-9.42-8.43-15.77-18.84-17.63-22s-.19-5%201.41-6.56c1.44-1.44%203.2-3.76%204.79-5.63a21.34%2021.34%200%200%200%203.2-5.34%205.91%205.91%200%200%200-.27-5.63c-.8-1.61-7.11-17.26-9.75-23.64-2.56-6.2-5.2-5.36-7.11-5.46-1.84-.1-3.95-.12-6.07-.12a11.69%2011.69%200%200%200-8.44%203.95c-2.9%203.2-11.05%2010.84-11.05%2026.43S82.59%20114.8%2084.19%20117c1.61%202.14%2035.32%2054.13%2085.6%2075.9a287.4%20287.4%200%200%200%2028.58%2010.63c12%203.83%2022.93%203.29%2031.57.66%209.63-2.94%2029.68-12.19%2033.86-23.94s4.15-21.83%202.91-23.94-4.66-3.21-9.82-5.82ZM128%20224a96%2096%200%201%201%2096-96%2096.11%2096.11%200%200%201-96%2096Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M187.58%20124.23c-3.16-1.61-18.67-9.29-21.58-10.36s-5-1.6-7.11%201.6-8.15%2010.36-10%2012.47-3.7%202.41-6.85.8-13.39-4.95-25.49-15.79c-9.42-8.43-15.77-18.84-17.63-22s-.19-5%201.41-6.56c1.44-1.44%203.2-3.76%204.79-5.63a21.34%2021.34%200%200%200%203.2-5.34%205.91%205.91%200%200%200-.27-5.63c-.8-1.61-7.11-17.26-9.75-23.64-2.56-6.2-5.2-5.36-7.11-5.46-1.84-.1-3.95-.12-6.07-.12a11.69%2011.69%200%200%200-8.44%203.95c-2.9%203.2-11.05%2010.84-11.05%2026.43S82.59%20114.8%2084.19%20117c1.61%202.14%2035.32%2054.13%2085.6%2075.9a287.4%20287.4%200%200%200%2028.58%2010.63c12%203.83%2022.93%203.29%2031.57.66%209.63-2.94%2029.68-12.19%2033.86-23.94s4.15-21.83%202.91-23.94-4.66-3.21-9.82-5.82ZM128%20224a96%2096%200%201%201%2096-96%2096.11%2096.11%200%200%201-96%2096Z%22/%3E%3C/svg%3E");
}

/* chat-square */
.icon-kakao_story:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M216%2048H40a16%2016%200%200%200-16%2016v160a15.85%2015.85%200%200%200%209.24%2014.5A16.05%2016.05%200%200%200%2040%20240a15.89%2015.89%200%200%200%2010.25-3.78L82.79%20208H216a16%2016%200%200%200%2016-16V64a16%2016%200%200%200-16-16Zm-72%2088h-32a8%208%200%200%201%200-16h32a8%208%200%200%201%200%2016Zm16-32H96a8%208%200%200%201%200-16h64a8%208%200%200%201%200%2016Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M216%2048H40a16%2016%200%200%200-16%2016v160a15.85%2015.85%200%200%200%209.24%2014.5A16.05%2016.05%200%200%200%2040%20240a15.89%2015.89%200%200%200%2010.25-3.78L82.79%20208H216a16%2016%200%200%200%2016-16V64a16%2016%200%200%200-16-16Zm-72%2088h-32a8%208%200%200%201%200-16h32a8%208%200%200%201%200%2016Zm16-32H96a8%208%200%200%201%200-16h64a8%208%200%200%201%200%2016Z%22/%3E%3C/svg%3E");
}

/* pinwheel */
.icon-Pinterest_icon:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M224%20128a96%2096%200%201%201-96-96%2096.11%2096.11%200%200%201%2096%2096Zm-84%2032.11c5.71%2020%203.13%2035.89-7.25%2046.27-18.32%2018.32-52.15%2012.33-52.5%2012.27a8%208%200%200%201%202.5-15.82c.08%200%2024.22%203.79%2037.19-9.18%204.14-4.14%206.6-10.46%207.31-18.65L119.18%20159a36%2036%200%201%201%2054.8-37.81l.08.34ZM128%20104a20%2020%200%201%200%2020%2020%2020%2020%200%200%200-20-20Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M224%20128a96%2096%200%201%201-96-96%2096.11%2096.11%200%200%201%2096%2096Zm-84%2032.11c5.71%2020%203.13%2035.89-7.25%2046.27-18.32%2018.32-52.15%2012.33-52.5%2012.27a8%208%200%200%201%202.5-15.82c.08%200%2024.22%203.79%2037.19-9.18%204.14-4.14%206.6-10.46%207.31-18.65L119.18%20159a36%2036%200%201%201%2054.8-37.81l.08.34ZM128%20104a20%2020%200%201%200%2020%2020%2020%2020%200%200%200-20-20Z%22/%3E%3C/svg%3E");
}

/* quotes */
.icon-hackya-quote_left:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M36%20160h36v44a4%204%200%200%200%204%204h40a4%204%200%200%200%204-4V120a4%204%200%200%200-4-4H36a4%204%200%200%200-4%204v36a4%204%200%200%200%204%204Zm104%200h36v44a4%204%200%200%200%204%204h40a4%204%200%200%200%204-4V120a4%204%200%200%200-4-4H140a4%204%200%200%200-4%204v36a4%204%200%200%200%204%204Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M36%20160h36v44a4%204%200%200%200%204%204h40a4%204%200%200%200%204-4V120a4%204%200%200%200-4-4H36a4%204%200%200%200-4%204v36a4%204%200%200%200%204%204Zm104%200h36v44a4%204%200%200%200%204%204h40a4%204%200%200%200%204-4V120a4%204%200%200%200-4-4H140a4%204%200%200%200-4%204v36a4%204%200%200%200%204%204Z%22/%3E%3C/svg%3E");
}

/* sun */
.icon-sunny:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M120%2040V16a8%208%200%200%201%2016%200v24a8%208%200%200%201-16%200Zm72%2088a64%2064%200%201%201-64-64%2064.07%2064.07%200%200%201%2064%2064Zm-16%200a48%2048%200%201%200-48%2048%2048.05%2048.05%200%200%200%2048-48ZM58.34%2069.66a8%208%200%200%200%2011.32-11.32l-16-16A8%208%200%200%200%2042.34%2053.66Zm0%20116.68-16%2016a8%208%200%200%200%2011.32%2011.32l16-16a8%208%200%200%200-11.32-11.32ZM192%2072a8%208%200%200%200%205.66-2.34l16-16a8%208%200%200%200-11.32-11.32l-16%2016A8%208%200%200%200%20192%2072Zm5.66%20114.34a8%208%200%200%200-11.32%2011.32l16%2016a8%208%200%200%200%2011.32-11.32ZM48%20128a8%208%200%200%200-8-8H16a8%208%200%200%200%200%2016h24a8%208%200%200%200%208-8Zm80%2080a8%208%200%200%200-8%208v24a8%208%200%200%200%2016%200v-24a8%208%200%200%200-8-8Zm112-88h-24a8%208%200%200%200%200%2016h24a8%208%200%200%200%200-16Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M120%2040V16a8%208%200%200%201%2016%200v24a8%208%200%200%201-16%200Zm72%2088a64%2064%200%201%201-64-64%2064.07%2064.07%200%200%201%2064%2064Zm-16%200a48%2048%200%201%200-48%2048%2048.05%2048.05%200%200%200%2048-48ZM58.34%2069.66a8%208%200%200%200%2011.32-11.32l-16-16A8%208%200%200%200%2042.34%2053.66Zm0%20116.68-16%2016a8%208%200%200%200%2011.32%2011.32l16-16a8%208%200%200%200-11.32-11.32ZM192%2072a8%208%200%200%200%205.66-2.34l16-16a8%208%200%200%200-11.32-11.32l-16%2016A8%208%200%200%200%20192%2072Zm5.66%20114.34a8%208%200%200%200-11.32%2011.32l16%2016a8%208%200%200%200%2011.32-11.32ZM48%20128a8%208%200%200%200-8-8H16a8%208%200%200%200%200%2016h24a8%208%200%200%200%208-8Zm80%2080a8%208%200%200%200-8%208v24a8%208%200%200%200%2016%200v-24a8%208%200%200%200-8-8Zm112-88h-24a8%208%200%200%200%200%2016h24a8%208%200%200%200%200-16Z%22/%3E%3C/svg%3E");
}

/* cloud */
.icon-cloudy:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M160%2040a88.09%2088.09%200%200%200-78.71%2048.67A64%2064%200%201%200%2072%20216h88a88%2088%200%200%200%200-176Zm0%20160H72a48%2048%200%200%201%200-96c1.1%200%202.2.05%203.29.13A88%2088%200%200%200%2072%20128a8%208%200%200%200%2016%200%2072%2072%200%201%201%2072%2072Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M160%2040a88.09%2088.09%200%200%200-78.71%2048.67A64%2064%200%201%200%2072%20216h88a88%2088%200%200%200%200-176Zm0%20160H72a48%2048%200%200%201%200-96c1.1%200%202.2.05%203.29.13A88%2088%200%200%200%2072%20128a8%208%200%200%200%2016%200%2072%2072%200%201%201%2072%2072Z%22/%3E%3C/svg%3E");
}

/* cloud-rain */
.icon-rain:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M96%20212a12%2012%200%201%201-12-12%2012%2012%200%200%201%2012%2012Zm52-16a12%2012%200%201%200%2012%2012%2012%2012%200%200%200-12-12Zm-80-16a12%2012%200%201%200%2012%2012%2012%2012%200%200%200-12-12Zm112%200a12%2012%200%201%200%2012%2012%2012%2012%200%200%200-12-12Zm-48%2032a12%2012%200%201%200%2012%2012%2012%2012%200%200%200-12-12ZM160%2040a88.09%2088.09%200%200%200-78.71%2048.67A64%2064%200%201%200%2072%20216a8%208%200%200%200%200-16%2048%2048%200%200%201%200-96c1.1%200%202.2.05%203.29.13A88%2088%200%200%200%2072%20128a8%208%200%200%200%2016%200%2072%2072%200%201%201%2072%2072%208%208%200%200%200%200%2016%2088%2088%200%200%200%200-176Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M96%20212a12%2012%200%201%201-12-12%2012%2012%200%200%201%2012%2012Zm52-16a12%2012%200%201%200%2012%2012%2012%2012%200%200%200-12-12Zm-80-16a12%2012%200%201%200%2012%2012%2012%2012%200%200%200-12-12Zm112%200a12%2012%200%201%200%2012%2012%2012%2012%200%200%200-12-12Zm-48%2032a12%2012%200%201%200%2012%2012%2012%2012%200%200%200-12-12ZM160%2040a88.09%2088.09%200%200%200-78.71%2048.67A64%2064%200%201%200%2072%20216a8%208%200%200%200%200-16%2048%2048%200%200%201%200-96c1.1%200%202.2.05%203.29.13A88%2088%200%200%200%2072%20128a8%208%200%200%200%2016%200%2072%2072%200%201%201%2072%2072%208%208%200%200%200%200%2016%2088%2088%200%200%200%200-176Z%22/%3E%3C/svg%3E");
}

/* snowflake */
.icon-snow:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232%20128a8%208%200%200%201-8%208h-23.53l12.68%2021.36a8%208%200%201%201-13.86%208l-16.71-28.14-23.08%2013.33%2011.68%2042.82a8%208%200%200%201-15.44%204.2L148%20175.91l-11.41%2019.77A8%208%200%200%201%20128%20200a8%208%200%200%201-6.93-12l16.31-28.26-23.07-13.33-16.75%2028.2a8%208%200%201%201-13.86-8L96.38%20148H72a8%208%200%200%201%200-16h23.53l-12.66-21.32a8%208%200%201%201%2013.86-8L113.38%20131l23.07-13.33-11.68-42.85a8%208%200%201%201%2015.44-4.2L148%2093.08l11.41-19.77a8%208%200%200%201%2013.86%208L157%20109.32l23.08%2013.33%2016.75-28.2a8%208%200%201%201%2013.86%208L198%20124H232a8%208%200%200%201%200%2016Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232%20128a8%208%200%200%201-8%208h-23.53l12.68%2021.36a8%208%200%201%201-13.86%208l-16.71-28.14-23.08%2013.33%2011.68%2042.82a8%208%200%200%201-15.44%204.2L148%20175.91l-11.41%2019.77A8%208%200%200%201%20128%20200a8%208%200%200%201-6.93-12l16.31-28.26-23.07-13.33-16.75%2028.2a8%208%200%201%201-13.86-8L96.38%20148H72a8%208%200%200%201%200-16h23.53l-12.66-21.32a8%208%200%201%201%2013.86-8L113.38%20131l23.07-13.33-11.68-42.85a8%208%200%201%201%2015.44-4.2L148%2093.08l11.41-19.77a8%208%200%200%201%2013.86%208L157%20109.32l23.08%2013.33%2016.75-28.2a8%208%200%201%201%2013.86%208L198%20124H232a8%208%200%200%201%200%2016Z%22/%3E%3C/svg%3E");
}

/* lightning */
.icon-thunderstorm:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M213.85%20125.23l-112%20120a8%208%200%200%201-13.85-7.23l14.62-72.06-57.62-8.23A8%208%200%200%201%2040%20150.94a7.9%207.9%200%200%201%201.3-7.17l112-120a8%208%200%200%201%2013.85%207.23l-14.62%2072.06%2057.62%208.23A8%208%200%200%201%20216%20119a7.9%207.9%200%200%201-2.15%206.23Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M213.85%20125.23l-112%20120a8%208%200%200%201-13.85-7.23l14.62-72.06-57.62-8.23A8%208%200%200%201%2040%20150.94a7.9%207.9%200%200%201%201.3-7.17l112-120a8%208%200%200%201%2013.85%207.23l-14.62%2072.06%2057.62%208.23A8%208%200%200%201%20216%20119a7.9%207.9%200%200%201-2.15%206.23Z%22/%3E%3C/svg%3E");
}

/* cloud-fog */
.icon-fog:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M24%20104a8%208%200%200%201%208-8h192a8%208%200%200%201%200%2016H32a8%208%200%200%201-8-8Zm8%2040h192a8%208%200%200%200%200-16H32a8%208%200%200%200%200%2016Zm160%2016H64a8%208%200%200%200%200%2016h128a8%208%200%200%200%200-16Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M24%20104a8%208%200%200%201%208-8h192a8%208%200%200%201%200%2016H32a8%208%200%200%201-8-8Zm8%2040h192a8%208%200%200%200%200-16H32a8%208%200%200%200%200%2016Zm160%2016H64a8%208%200%200%200%200%2016h128a8%208%200%200%200%200-16Z%22/%3E%3C/svg%3E");
}

/* mist */
.icon-mist:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M24%20104a8%208%200%200%201%208-8h192a8%208%200%200%201%200%2016H32a8%208%200%200%201-8-8Zm8%2040h192a8%208%200%200%200%200-16H32a8%208%200%200%200%200%2016Zm160%2016H64a8%208%200%200%200%200%2016h128a8%208%200%200%200%200-16Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M24%20104a8%208%200%200%201%208-8h192a8%208%200%200%201%200%2016H32a8%208%200%200%201-8-8Zm8%2040h192a8%208%200%200%200%200-16H32a8%208%200%200%200%200%2016Zm160%2016H64a8%208%200%200%200%200%2016h128a8%208%200%200%200%200-16Z%22/%3E%3C/svg%3E");
}

/* sun-dim */
.icon-haze:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M120%2040V16a8%208%200%200%201%2016%200v24a8%208%200%200%201-16%200Zm8%20168a8%208%200%200%200-8%208v24a8%208%200%200%200%2016%200v-24a8%208%200%200%200-8-8Zm-80-96H24a8%208%200%200%200%200%2016h24a8%208%200%200%200%200-16Zm184%200h-24a8%208%200%200%200%200%2016h24a8%208%200%200%200%200-16ZM58.34%2069.66a8%208%200%200%200%2011.32-11.32l-16-16a8%208%200%200%200-11.32%2011.32Zm139.32%200%2016-16a8%208%200%200%200-11.32-11.32l-16%2016a8%208%200%200%200%2011.32%2011.32ZM58.34%20186.34a8%208%200%200%200-11.32%2011.32l16%2016a8%208%200%200%200%2011.32-11.32Zm139.32%200-16%2016a8%208%200%200%200%2011.32%2011.32l16-16a8%208%200%200%200-11.32-11.32ZM128%2080a48%2048%200%201%200%2048%2048%2048.05%2048.05%200%200%200-48-48Zm0%2080a32%2032%200%201%201%2032-32%2032%2032%200%200%201-32%2032Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M120%2040V16a8%208%200%200%201%2016%200v24a8%208%200%200%201-16%200Zm8%20168a8%208%200%200%200-8%208v24a8%208%200%200%200%2016%200v-24a8%208%200%200%200-8-8Zm-80-96H24a8%208%200%200%200%200%2016h24a8%208%200%200%200%200-16Zm184%200h-24a8%208%200%200%200%200%2016h24a8%208%200%200%200%200-16ZM58.34%2069.66a8%208%200%200%200%2011.32-11.32l-16-16a8%208%200%200%200-11.32%2011.32Zm139.32%200%2016-16a8%208%200%200%200-11.32-11.32l-16%2016a8%208%200%200%200%2011.32%2011.32ZM58.34%20186.34a8%208%200%200%200-11.32%2011.32l16%2016a8%208%200%200%200%2011.32-11.32Zm139.32%200-16%2016a8%208%200%200%200%2011.32%2011.32l16-16a8%208%200%200%200-11.32-11.32ZM128%2080a48%2048%200%201%200%2048%2048%2048.05%2048.05%200%200%200-48-48Zm0%2080a32%2032%200%201%201%2032-32%2032%2032%200%200%201-32%2032Z%22/%3E%3C/svg%3E");
}

/* g-plus */
.icon-google-plus2:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.12%20104.12%200%200%200%20128%2024Zm0%20192a88%2088%200%201%201%2088-88%2088.1%2088.1%200%200%201-88%2088Zm48-96a48%2048%200%201%201-48-48%208%208%200%200%201%200%2016%2032%2032%200%201%200%2032%2032%208%208%200%200%201%2016%200Zm24-8h-16a8%208%200%200%200%200%2016h16a8%208%200%200%200%200-16Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.12%20104.12%200%200%200%20128%2024Zm0%20192a88%2088%200%201%201%2088-88%2088.1%2088.1%200%200%201-88%2088Zm48-96a48%2048%200%201%201-48-48%208%208%200%200%201%200%2016%2032%2032%200%201%200%2032%2032%208%208%200%200%201%2016%200Zm24-8h-16a8%208%200%200%200%200%2016h16a8%208%200%200%200%200-16Z%22/%3E%3C/svg%3E");
}

/* ── end of SECTION 1 ── */


/*══════════════════════════════════════════════════════════════════════════*\
   SECTION 2 — SIDE PANEL — CONTENT
   (was sidebar.css)
   What the side panel looks like: 최근댓글 list, 월별 보관함
   dropdown, scrollbars, tabs widget.
\*══════════════════════════════════════════════════════════════════════════*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
   HackYa_17 — Sidebar / Comments Panel
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*────────────────────────────────────────────────────*\
   Panel container — visual overrides only
   Positioning/visibility/animation controlled by
   header.css and perspective.css
\*────────────────────────────────────────────────────*/

.top-nav-hidden,
.top-nav-hidden.scroll-down,
.top-nav-hidden.scroll-up,
.top-nav-hidden.scroll-up.hide,
.top-nav-hidden.tilt.scroll-up,
.top-nav-hidden.hide {
    background: #fff !important;
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}



/*────────────────────────────────────────────────────*\
   Panel inner content
\*────────────────────────────────────────────────────*/

.panel-inner {
    padding: 3.5em 1.2em 2em;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.panel-inner .panel-comments {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.panel-inner .panel-title,
.panel-inner .panel-archive-select {
    flex-shrink: 0;
}

/* Comments still scroll (wheel / touch), but hide the scrollbar itself */
/* Colorful thin scrollbar for the comments list */
/* Inner: comments list still scrolls, but its bar is hidden */
.panel-inner .panel-comments {
    scrollbar-width: none;                              /* Firefox */
}
.panel-inner .panel-comments::-webkit-scrollbar {
    display: none;                                      /* Chrome, Edge, Safari */
}

/* Middle: colorful scrollbar on the side panel itself */
.top-nav-hidden {
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: #8a6cf0 transparent;
}
.top-nav-hidden::-webkit-scrollbar {
    width: 6px;
}
.top-nav-hidden::-webkit-scrollbar-track {
    background: transparent;
}
.top-nav-hidden::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4facfe, #9b5cf6);
    border-radius: 6px;
}
.top-nav-hidden::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2f8ff0, #7c3aed);
}


.panel-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.05em;
    margin: 0 0 1em;
    padding-top: 0.5em;
    /*border-top: 2px solid rgba(0,0,0,0.1);*/
    box-shadow: 0 -8px 8px -8px rgba(0,0,0,0.25);
}


/*────────────────────────────────────────────────────*\
   Comment list
\*────────────────────────────────────────────────────*/

.panel-comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.panel-comment-item {
    display: flex;
    gap: 0.7em;
    align-items: flex-start;
    padding: 0.75em 0;
    border-bottom: 1px solid rgb(0 0 0 / 20%);
}

.panel-comment-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
}

.panel-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.panel-comment-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.panel-comment-author {
    font-size: 1em;
    font-weight: 700;
    color: #333;
}

a.panel-comment-excerpt {
    color: #333;
    font-size: 1em;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

a.panel-comment-excerpt:hover { color: #000; }

a.panel-comment-post {
    color: #1a73e8;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

a.panel-comment-post:hover { color: #0d47a1; }

.panel-comment-time {
    font-size: 0.85em;
    color: rgba(0,0,0,0.45);
}

.panel-no-comments {
    color: rgba(0,0,0,0.4);
    font-size: 0.95em;
    text-align: center;
    padding: 2em 0;
}

/*────────────────────────────────────────────────────*\
   Monthly archive dropdown
\*────────────────────────────────────────────────────*/

.panel-title--archive {
    margin-top: 1.5em;
}

/*
.panel-archive-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 3px;
    background: #fff;
    color: #333;
    font-size: 0.95em;
    cursor: pointer;
}

.panel-archive-select:focus {
    outline: 0;
    border-color: #1a73e8;
}

*/

.panel-archive-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 57px;
    padding: 10px 38px 10px 16px;
    background: #fff url("select-arrows.svg") no-repeat right 16px center;
    background-size: 10px;
    transition: border-color .1s ease-in-out,box-shadow .1s ease-in-out;
    border: 1px solid #1a73e8;
    border-radius: 3px;
}
.panel-archive-select:hover {
    border: 1px solid #002bff;
}
.panel-archive-select:focus {
    border: 1px solid #002bff;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,.2);
    outline: none;
}
/* remove default arrow in IE */
select::-ms-expand {
    display:none;
}





/*────────────────────────────────────────────────────*\
   Tabs Widget
\*────────────────────────────────────────────────────*/

#tabs { position: relative; }

.hackya-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    gap: 2px;
}

.hackya-tabs-nav li { flex: 1; }

.hackya-tabs-nav__link {
    display: block;
    padding: 0.55em 0.5em;
    text-align: center;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(0,0,0,0.4);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    cursor: pointer;
}

.hackya-tabs-nav__link:hover,
.hackya-tabs-nav__link.is-active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
}

.tab-container { display: none; padding: 0.75em 0; }
.tab-container.is-active { display: block; }

#tabs.no-js .tab-container { display: block; }
#tabs:not(.no-js) .tab-container:first-of-type { display: none; }

.hackya-tab { list-style: none; margin: 0; padding: 0; }

.hackya-tab li {
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.tab-item-thumbnail {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 4px;
}

.tab-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tab-item-inner { flex: 1; min-width: 0; }

.tab-item-title {
    margin: 0 0 0.2em;
    font-size: 1em;
    line-height: 1.3;
}

.tab-item-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

.tab-item-title a:hover { color: #1a73e8; }

.tab-item-category,
.tab-item-date {
    margin: 0;
    font-size: 0.85em;
    color: rgba(0,0,0,0.4);
}

.tab-item-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
}

.tab-item-name { font-size: 1em; color: #333; }
.tab-item-comment { font-size: 0.9em; color: rgba(0,0,0,0.65); }
.tab-item-comment a { color: inherit; text-decoration: none; }

/* Tag cloud */
#tab-tags { padding: 0.5em 0; }
#tab-tags li { border: none; padding: 0; }
#tab-tags a {
    display: inline-block;
    padding: 0.2em 0.6em;
    margin: 0.2em;
    font-size: 0.9em;
    border-radius: 3px;
    background: rgba(26,115,232,0.1);
    color: #1a73e8;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
#tab-tags a:hover { background: rgba(26,115,232,0.25); color: #0d47a1; }

@media (min-width: 1200px) {
    .top-nav-hidden {
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden;
        transition: margin-top 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94) !important;
    }

   
}

/* ── end of SECTION 2 ── */


/*══════════════════════════════════════════════════════════════════════════*\
   SECTION 3 — SIDE PANEL — POSITION & 3D TILT
   (was perspective.css)
   Where the side panel sits and how it slides in, the 3D tilt of
   the page behind it, the ❰❰ tab. Must come AFTER section 2.
\*══════════════════════════════════════════════════════════════════════════*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
   HackYa_17 — Perspective Slide Panel
   Based on Codrops "Perspective Page Transitions"
   Reconstructed from archived HTML + JS behaviour

   This file controls WHERE the side panel sits and HOW it
   slides in (plus the 3D tilt of the page behind it).
   What the panel's CONTENT looks like (comments list,
   month dropdown, scrollbars) lives in sidebar.css.

   Cleaned up 2026-10-27: removed old .panel-comments
   scrollbar / max-height rules (now in sidebar.css) and
   the unused #showMenu2 rule.
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ── Outer perspective wrapper ───────────────────── */
#perspective {
    perspective: 1500px;
    perspective-origin: 100% 50%;
    width: 100%;
    min-height: 100%;
}

/* ── Inner container that gets tilted ────────────── */
#perspective .container {
    position: relative;
    z-index: 1;
    transform-origin: 100% 50%;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94),
                opacity 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94),
                filter 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

/* ── Active state: content tilts left + dims + blurs ─ */
#perspective.animate .container {
    transform: translateX(-290px) rotateY(-15deg);
    opacity: 0.45;
    filter: blur(2px);
    cursor: pointer;
}

/* ── Active state: locks scroll during open ──────── */
#perspective.modalview {
    overflow: hidden;
}

body.panel-open {
    overflow-y: hidden;
}

body.panel-open #showMenu {
    right: 22rem;
    transform: scaleX(-1);
}

/* ── Sticky inner content on desktop ─────────────── */
@media (min-width: 1200px) {
    .top-nav-hidden .panel-inner {
        position: sticky;
        top: 0;
    }
}

/* ── The slide-in side panel — RIGHT SIDE ────────── */
.top-nav-hidden,
.top-nav-hidden.scroll-down,
.top-nav-hidden.scroll-up,
.top-nav-hidden.scroll-up.hide,
.top-nav-hidden.tilt.scroll-up,
.top-nav-hidden.hide {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 30% !important;
    height: 100% !important;
    transform: translateX(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    z-index: 11 !important;
    overflow-y: auto !important;   /* the colorful panel scrollbar (styled in sidebar.css) */
    transition: transform 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94) !important;
}

.top-nav-hidden.animate {
    transform: translateX(0) !important;
}

.top-nav-hidden .panel-comment-excerpt,
.top-nav-hidden .panel-comment-post {
    display: block;
    padding: 0;
    box-sizing: border-box;
}

.top-nav-hidden .panel-comments {
    display: flex;
    flex-direction: column;
}

/* ── Comment list: start at the TOP, never centered ──
   A legacy 2017 rule in header.css (`.top-nav-hidden ul
   { justify-content: center; }`, from when this panel was a nav bar)
   centered this scrolling list, so when it was taller than the panel
   the newest comments spilled ABOVE the top edge and couldn't be
   reached. That rule was removed 2026-10-27; this override stays as
   a safeguard. It replaced the old 26–36em padding hack. */
.top-nav-hidden .panel-comments {
    justify-content: flex-start;
    margin: 0;
}

/* ── showMenu toggle button (❰❰) — RIGHT EDGE ────── */
#showMenu {
    right: 0;
    position: fixed;
    top: 40%;
    cursor: pointer;
    font-size: 4vw;
    z-index: 204;
    color: dodgerblue;
    text-decoration: none;
    transition: color 0.2s, opacity 0.4s,
                right 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94),
                transform 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

#showMenu:hover {
    color: #8b5cf6;
}

.chevron_tab {
    display: inline-block;
    letter-spacing: -0.05em;
    line-height: 1;
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 1));
}

/* ── Desktop (≥1200px): sidebar always visible ───── */
@media (min-width: 1200px) {
    #showMenu { display: none; }

    .top-nav-hidden { box-shadow: -5px 10px 30px rgb(157 0 255 / 20%); }

    .top-nav-hidden,
    .top-nav-hidden.scroll-down,
    .top-nav-hidden.scroll-up,
    .top-nav-hidden.scroll-up.hide,
    .top-nav-hidden.tilt.scroll-up,
    .top-nav-hidden.hide {
        position: absolute !important;
        height: auto !important;
        transform: translateX(0) !important;
        margin-top: 10.5rem !important; /* very important — don't remove it */
        transition: margin-top 0.4s cubic-bezier(0.17, 0.04, 0.03, 0.94) !important;
    }

    /* Login panel open → push the sidebar down by the panel's height */
    body.login-open .top-nav-hidden {
        margin-top: calc(10.5rem + 15.5em) !important;
    }
}

/* ── Phones & small tablets (≤768px): no side panel ──
   Same breakpoint as the hamburger menu in header_responsive.css.
   The panel normally waits just off the right edge (translateX(100%)),
   and on touch screens a sideways swipe could drag it — and the ❰❰ tab —
   into view. display:none takes both out of the page entirely, so
   there's nothing left to swipe to. */
@media (max-width: 768px) {
    #showMenu,
    .top-nav-hidden {
        display: none !important;
    }
}

/* ── end of SECTION 3 ── */


/*══════════════════════════════════════════════════════════════════════════*\
   SECTION 4 — FOOTER, AUDIO PLAYER & SITE-WIDE BITS
   (was footer.css)
   Footer, tickers, scroll-to-top, music player (#ap-bar), pagination,
   WordPress core classes, ALL @keyframes animations, print styles.
\*══════════════════════════════════════════════════════════════════════════*/

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   Layout: stock ticker bar → three-column body → email row → base bar
   ══════════════════════════════════════════════════════════════════ */

footer {
    background: radial-gradient(circle, #334, #111);
    border: solid 1px rgb(0, 150, 251);
    color: white;
    position: relative;
    z-index: 99;
}

footer a         { color: white; }
footer a:hover   { color: dodgerblue; }


/* ── 1. Stock ticker bar ─────────────────────────────────────────── */

.stock-container {
    display: flex;
    gap: 16px;
    padding: 2rem 1rem;
    background: hsl(223.94deg 100% 24.9% / 15%);
    border-bottom: 1px solid #8500ff;
}

.tradingview-widget-container {
    flex: 1;
    background: hsl(257.54deg 36.67% 11.76%);
    border: 1px solid #003893;
    border-radius: 10px;
    padding: 4px 12px;   /* was 12px; TradingView's iframe is a fixed 69px tall, so 12px top/bottom cut off its bottom line */
    pointer-events: none;
    overflow: hidden;
    transition: border-color 0.2s;
}

.tradingview-widget-container:hover {
    border-color: #00e1f7;
}

@media (max-width: 780px) {
    .stock-container { flex-direction: column; }
}


/* ── 2. Footer body: logo + contact (left) | subscribe box (right) ── */

.footer-body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 2rem 6em 1.5rem 2rem;   /* right padding clears the scroll-to-top button */
}

@media (max-width: 780px) {
    .footer-body {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 2rem 1.5rem;
    }
    /* last block clears the scroll-to-top button */
    .footer-body > :last-child { padding-bottom: 4em; }
}

/* Col 1 – Logo */
.footer-col--logo {}

.footer-logo {
    margin: 0;
    padding: 0;
}

.footer-logo a {
    display: inline-block;
}

/* Col 2 – Subscribe box ("새 글 알림 받기", added 2026-10-28)
   Shown to everyone once HACKYA_SUBSCRIBE_ACTION is set in inc/theme-setup.php;
   until then only to logged-in admins, as a preview. (Replaced the old
   "Col 2 – links" and "Col 3 – Social / YouTube" rules; YouTube now sits
   under the logo, next to the email — see "3b. YouTube row" below.) */
.footer-col--subscribe {
    justify-self: end;
    width: 100%;
    max-width: 26rem;
}

.footer-subscribe__title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.footer-subscribe__text {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: #94a3b8;
}

.footer-subscribe__row {
    display: flex;
    gap: 0.5rem;
}

.footer-subscribe__input {
    flex: 1;
    min-width: 0;
    padding: 0.6em 0.9em;
    border: 1px solid rgba(124, 58, 237, 0.5);
    border-radius: 6px;
    background: #0f0f1a;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
}

.footer-subscribe__input::placeholder { color: #64748b; }

.footer-subscribe__input:focus {
    outline: none;
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.footer-subscribe__btn {
    flex-shrink: 0;
    padding: 0.6em 1.3em;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);   /* same as the player's Play button */
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
}

.footer-subscribe__btn:hover    { opacity: 0.9; }
.footer-subscribe__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.footer-subscribe__note {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

/* Admin-only notice while no email service is connected */
.footer-subscribe__preview {
    margin: 0.5rem 0 0;
    padding: 0.3em 0.6em;
    border: 1px dashed #f9d423;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #f9d423;
}

@media (max-width: 780px) {
    .footer-col--subscribe { justify-self: center; }
}


/* ── 3. Email row ────────────────────────────────────────────────── */

.email-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    /*vertical-align: -0.1em;*/
	margin-left: .75rem;
}

.footer-email-row {
    font-size: 0.9rem;
    padding: 0.5rem 0 0 0;
}

.footer-email-row .email a {
    color: #94a3b8;
    text-decoration: none;
}

.footer-email-row .email a:hover {
    color: dodgerblue;
}


/* ── 3b. YouTube row (under the email, same look) ─────────────────── */

.footer-yt-row {
    font-size: 0.9rem;
    padding: 0.35rem 0 0 0;
}

.footer-yt-row a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: #94a3b8;
    text-decoration: none;
}

.footer-yt-row a:hover { color: dodgerblue; }

.footer-yt-row svg {
    width: 1em;
    height: 1em;
    margin-left: .75rem;   /* lines up with the email icon above */
    color: #ff0000;        /* only the icon is YouTube red */
}

/* Small red "구독" pill next to it — opens YouTube's Subscribe pop-up */
.footer-yt-row .footer-yt-subscribe {
    margin-left: 0.6em;
    padding: 0.15em 0.75em;
    border-radius: 999px;
    background: #ff0000;
    color: #fff;
    font-size: 0.8em;
    font-weight: 600;
    transition: background 0.2s;
}

.footer-yt-row .footer-yt-subscribe:hover {
    background: #cc0000;
    color: #fff;
}


/* ── 4. Base bar – copyright ─────────────────────────────────────── */

.site-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 2rem;
    border-top: 1px solid rgba(0, 150, 251, 0.2);
    font-size: 0.85rem;
    color: #94a3b8;
}

.site-info p { margin: 0; }


/* ── 5. Scroll-to-top ────────────────────────────────────────────── */

.scroll-to-top {
    visibility: hidden;
    opacity: 0;
    background: radial-gradient(circle, #5757ff, #59009c);
    width: 3em;
    height: 3em;
    text-align: center;
    line-height: 1em;
    position: fixed;
    bottom: -2em;
    right: 1.75em;
    z-index: 10;
    cursor: pointer;
    border-radius: 0.25em;
    transition: all 0.2s;
}

.scroll-to-top.fade-in {
    visibility: visible;
    bottom: 3.5em;
    opacity: 1;
    border: solid 1px rgb(0, 150, 251);
}

.scroll-to-top.fade-in:hover { opacity: 0.8; }

#up_button_chevron {
    font: bold 3em Helvetica;
    color: white;
    transform: rotate(90deg);
    position: absolute;
    left: 0.375em;
    top: -0.125em;
    user-select: none;
}


/* ══════════════════════════════════════════════════════════════════
   PERSISTENT AUDIO PLAYER  (#ap-bar)
   ══════════════════════════════════════════════════════════════════ */

#ap-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
    border-top: 1px solid rgba(124, 58, 237, 0.4);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #cbd5e1;
}

.ap-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    height: 48px;
    box-sizing: border-box;
    overflow: hidden;
}

#ap-now-playing {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #94a3b8;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.ap-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    border-radius: 50px;
    background: #1e1e30;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.ap-btn:hover { background: #2a2a40; color: white; }

.ap-btn-play {
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    color: white;
    font-weight: 600;
    padding: 6px 14px;
}
.ap-btn-play:hover { opacity: 0.9; background: linear-gradient(135deg, #7c3aed, #06b6d4); }

.ap-active-loop {
    background: linear-gradient(135deg, #e65c00, #f9d423) !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(230, 92, 0, 0.4);
}

.ap-btn-toggle { font-size: 15px; padding: 6px 12px; }

.ap-volume {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ap-volume input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, #7c3aed 80%, #2a2a40 80%);
    outline: none;
    cursor: pointer;
}
.ap-volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(124, 58, 237, 0.6);
}

#ap-volume-label {
    font-size: 11px;
    color: #64748b;
    min-width: 28px;
    text-align: right;
}


#ap-playlist::-webkit-scrollbar {
    width: 6px;
}
#ap-playlist::-webkit-scrollbar-track {
    background: #0f0f1a;
    border-radius: 3px;
}
#ap-playlist::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.5);
    border-radius: 3px;
}
#ap-playlist::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.9);
}

#ap-panel {
    max-height: 0;
    overflow: hidden;
    border-top: 0 solid transparent;
    transition: max-height 0.35s ease;
}
#ap-panel.ap-open {
    max-height: 320px;
    border-top: 1px solid rgba(124, 58, 237, 0.2);
}

.ap-page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6px 16px;
    font-size: 12px;
    color: #475569;
}
.ap-page-nav button {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    transition: color 0.2s;
}
.ap-page-nav button:hover { color: white; }

#ap-playlist {
    list-style: none;
    padding: 0 12px 8px;
    margin: 0;
    overflow-y: auto;
    max-height: 240px;
}
#ap-playlist li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin: 3px 0;
    background: #0f0f1a;
    border: 1px solid #1e1e30;
    border-radius: 6px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 12px;
    transition: background 0.2s, border-color 0.2s;
}
#ap-playlist li:hover { background: #1e1e30; border-color: rgba(124, 58, 237, 0.3); color: #e2e8f0; }
#ap-playlist li.active {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.15));
    border-color: rgba(124, 58, 237, 0.5);
    color: white;
}

.track-icon { margin-right: 6px; vertical-align: middle; opacity: 0.5; }
#ap-playlist li.active .track-icon { opacity: 1; }
.ap-artist { font-size: 11px; opacity: 0.6; }

body { padding-bottom: 48px; }

main[role="main"].pjax-loading { opacity: 0; transition: opacity 0.15s ease; }
main[role="main"] { transition: opacity 0.15s ease; }


/* ══════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════ */

#pagination {
    padding: 1em;
    clear: both;
}

#pagination a {
    border: 1px solid white;
}

#pagination a:hover {
    color: #62bdff;
    background: white;
    border: 1px solid black;
}

.page-numbers {
    background: #222;
    margin: 0 5px 0 0;
    display: inline-block;
    float: left;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    padding: 10px 13px;
    min-width: 36px;
    box-sizing: border-box;
    border-radius: 3px;
    text-align: center;
}

.page-numbers.current,
.pagination a:hover {
    color: #fff;
    margin: 0 5px 0 0;
    display: inline-block;
    float: left;
    line-height: 1;
    text-decoration: none;
    padding: 10px 13px;
    background: dodgerblue;
    min-width: 36px;
    box-sizing: border-box;
    border-radius: 3px;
    text-align: center;
}


/* ══════════════════════════════════════════════════════════════════
   WORDPRESS CORE
   ══════════════════════════════════════════════════════════════════ */

.wp-embed { opacity: 1; }

.alignnone                { margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter           { display: block; margin: 5px auto; }
.alignright               { float: right; margin: 5px 0 20px 20px; }
.alignleft                { float: left;  margin: 5px 20px 20px 0; }
a img.alignright          { float: right; margin: 5px 0 20px 20px; }
a img.alignnone           { margin: 5px 20px 20px 0; }
a img.alignleft           { float: left;  margin: 5px 20px 20px 0; }
a img.aligncenter         { display: block; margin: 0 auto; }

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone  { margin: 5px 20px 20px 0; }
.wp-caption.alignleft  { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img {
    border: 0;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
    font-size: 1em;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
    color: #8221ff;
}

.syntaxhighlighter { padding: 1em 0; }


/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */

@keyframes drophead {
    from { top: -6em; }
    to   { top: 0; }
}

@keyframes drop {
    from { transform: translateY(-3.75em); opacity: 0; }
    to   { transform: translateY(0);       opacity: 1; }
}

@keyframes rise {
    from { transform: translateY(0);        opacity: 1; }
    to   { transform: translateY(-3.75em);  opacity: 0; }
}

@keyframes slide-in {
    from { transform: translateX(-5em); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slide-out {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(-5em); opacity: 0; }
}

@keyframes fadeOut {
    from { transform: translateY(0);      opacity: 1; }
    to   { transform: translateY(3.75em); opacity: 0; }
}

@keyframes step-rotate {
    to { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════════
   BROWSER STYLES
   ══════════════════════════════════════════════════════════════════ */

div::-webkit-scrollbar       { width: 12px; }
div::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 2px; }
div::-webkit-scrollbar-thumb { background-color: #8e88ff; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

::selection          { background: #000; color: #fff; text-shadow: none; }
::-webkit-selection  { background: #000; color: #fff; text-shadow: none; }
::-moz-selection     { background: #000; color: #fff; text-shadow: none; }


/* ══════════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════════ */

@media print {
    * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
    a, a:visited                        { text-decoration: underline; }
    a[href]:after                       { content: " (" attr(href) ")"; }
    abbr[title]:after                   { content: " (" attr(title) ")"; }
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after                  { content: ""; }
    pre, blockquote                     { border: 1px solid #999; page-break-inside: avoid; }
    thead                               { display: table-header-group; }
    tr, img                             { page-break-inside: avoid; }
    img                                 { max-width: 100% !important; }
    @page                               { margin: 0.5cm; }
    p, h2, h3                           { orphans: 3; widows: 3; }
    h2, h3                              { page-break-after: avoid; }
}

/* Phones: no music player (audio.js isn't loaded on screens ≤768px) */
@media (max-width: 768px) {
    #ap-bar { display: none !important; }
    body { padding-bottom: 0; }   /* the 48px reserved for the player bar isn't needed */
}

/* ── end of SECTION 4 ── */


/*══════════════════════════════════════════════════════════════════════════*\
   SECTION 5 — COMMENTS
   (was comments.css)
   Comment list, 삭제 button, comment form, Google/Facebook login buttons.
\*══════════════════════════════════════════════════════════════════════════*/

/*════════════════════════════════════════════════════════════════════════════
 * comments.css
 * HackYa theme — comment list and comment form styling.
 * Clean white/neutral palette for readability.
 * Inherits body font stack (Korean/Japanese friendly).
 *
 * Load order: after hackya_style.css
 *   wp_enqueue_style('hackya-comments', $theme_uri . '/css/comments.css',
 *                    ['hackya-style'], $ver, 'all');
 *════════════════════════════════════════════════════════════════════════════*/


/*────────────────────────────────────────────────────────────────────────────
 * COMMENTS AREA
 *────────────────────────────────────────────────────────────────────────────*/

.comments-area {
	max-width: 46em;
	margin: 2.5em auto 3em;
	padding: 0 1em;
	color: #333;
}

.comments-title {
	font-size: 1.25em;
	font-weight: 700;
	color: #1a1a2e;
	border-bottom: 2px solid #e8e8f0;
	padding-bottom: 0.5em;
	margin-bottom: 1.5em;
}

.comments-count {
	color: #1a73e8;
}

.comments-none {
	color: #888;
	font-style: italic;
	margin-bottom: 2em;
}


/*────────────────────────────────────────────────────────────────────────────
 * COMMENT LIST
 *────────────────────────────────────────────────────────────────────────────*/

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list li {
	margin-bottom: 0;
}

/* Threading indentation — uses WordPress depth-X classes on each <li> */
.comment-list .depth-2 { padding-left: 2.5em; }
.comment-list .depth-3 { padding-left: 2.5em; }
.comment-list .depth-4 { padding-left: 2.5em; }
.comment-list .depth-5 { padding-left: 2.0em; }

/* Smaller avatars at deeper levels */
.comment-list .children .comment-avatar {
	width: 36px;
	height: 36px;
}


/*────────────────────────────────────────────────────────────────────────────
 * SINGLE COMMENT
 *────────────────────────────────────────────────────────────────────────────*/

.comment-body {
	display: flex;
	gap: 0.875em;
	padding: 1.25em 0;
	border-bottom: 1px solid #f0f0f5;
}

.comment-body:last-child {
	border-bottom: none;
}


/*────────────────────────────────────────────────────────────────────────────
 * AVATAR — generated color circle with initial / gravatar image
 *────────────────────────────────────────────────────────────────────────────*/

.comment-avatar-wrap {
	flex-shrink: 0;
}

.comment-avatar {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.comment-avatar--sm {
	width: 36px;
	height: 36px;
}

/* Initial letter — shown when no gravatar */
.comment-avatar__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
	font-weight: 700;
	font-size: 1.1em;
	line-height: 1;
	position: absolute;
	top: 0;
	left: 0;
}

/* Gravatar image — covers the initial when loaded */
.comment-avatar__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}


/*────────────────────────────────────────────────────────────────────────────
 * COMMENT CONTENT
 *────────────────────────────────────────────────────────────────────────────*/

.comment-content-wrap {
	flex: 1;
	min-width: 0; /* prevent flex overflow */
}

.comment-meta {
	display: flex;
	align-items: baseline;
	gap: 0.75em;
	margin-bottom: 0.4em;
	flex-wrap: wrap;
}

.comment-author-name {
	font-weight: 700;
	color: #1a1a2e;
	font-size: 0.95em;
}

.comment-date {
	font-size: 0.8em;
	color: #999;
}

.comment-text {
	font-size: 1.125em;
	line-height: 1.75em;
	color: #444;
}

.comment-text p {
	margin: 0 0 0.875em;
	white-space: pre-wrap; /* honour line breaks entered by commenter */
}

.comment-text p:last-child {
	margin-bottom: 0;
}

.comment-awaiting-moderation {
	font-size: 0.8em;
	color: #e67e22;
	margin-top: 0.4em;
}


/*────────────────────────────────────────────────────────────────────────────
 * REPLY BUTTON
 *────────────────────────────────────────────────────────────────────────────*/

.comment-actions {
	margin-top: 0.5em;
}

.comment-reply {
	display: inline-block;
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 1em;
	color: #ff0000;
	text-decoration: none;
	transition: color 0.2s ease;
}

.comment-reply-link:hover {
	color: #1a73e8;
}

.comment-reply-link svg {
	flex-shrink: 0;
}


/*────────────────────────────────────────────────────────────────────────────
 * COMMENT FORM AREA
 *────────────────────────────────────────────────────────────────────────────*/

.comment-form-area {
	margin-top: 2.5em;
	padding-top: 2em;
	border-top: 2px solid #e8e8f0;
}

.comment-form-title {
	font-size: 1.1em;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 1.25em;
}


/*────────────────────────────────────────────────────────────────────────────
 * OAUTH LOGIN BUTTONS
 *────────────────────────────────────────────────────────────────────────────*/

.comment-oauth {
	margin-bottom: 1.5em;
}

.comment-oauth__label {
	font-size: 0.85em;
	color: #888;
	margin-bottom: 0.75em;
}

.comment-oauth__buttons {
	display: flex;
	gap: 0.75em;
	flex-wrap: wrap;
}

.oauth-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.6em 1.25em;
	border-radius: 0.375em;
	font-size: 0.9em;
	font-weight: 500;
	text-decoration: none;
	transition: box-shadow 0.2s ease, opacity 0.2s ease;
	white-space: nowrap;
}

.oauth-btn:hover {
	opacity: 0.92;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Google — white button, grey border, dark text (official Google style) */
.oauth-btn--google {
	background: #fff;
	border: 1px solid #dadce0;
	color: #3c4043;
}

.oauth-btn--google:hover {
	color: #3c4043;
	background: #f8f9fa;
}

/* Facebook — official blue */
.oauth-btn--facebook {
	background: #1877f2;
	border: 1px solid #1877f2;
	color: #fff;
}

.oauth-btn--facebook:hover {
	color: #fff;
	background: #166fe5;
}

/* Divider between OAuth and manual form */
.comment-oauth__divider {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 1.25em 0 0;
	color: #bbb;
	font-size: 0.8em;
}

.comment-oauth__divider::before,
.comment-oauth__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e8e8f0;
}


/*────────────────────────────────────────────────────────────────────────────
 * LOGGED IN USER IDENTITY
 *────────────────────────────────────────────────────────────────────────────*/

.comment-logged-in {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 1.25em;
	padding: 0.75em 1em;
	background: #f8f8fc;
	border-radius: 0.5em;
	font-size: 0.9em;
	color: #555;
}

.comment-logged-in__name strong {
	color: #1a1a2e;
}

.comment-logged-in__logout {
	margin-left: auto;
	font-size: 0.8em;
	color: #999;
	text-decoration: none;
}

.comment-logged-in__logout:hover {
	color: #e53935;
}


/*────────────────────────────────────────────────────────────────────────────
 * COMMENT FORM FIELDS
 *────────────────────────────────────────────────────────────────────────────*/

#commentform {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Two-column row for name + email */
#commentform .comment-form-fields,
.comment-form-field--half {
	display: inline-block;
	width: calc(50% - 0.5em);
	vertical-align: top;
}

.comment-form-field--half:nth-child(odd) {
	margin-right: 1em;
}

.comment-form-field {
	margin: 0 0 1em;
	display: block;
}

.comment-form-field label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	color: #555;
	margin-bottom: 0.35em;
}

.comment-form-field .required {
	color: #e53935;
	margin-left: 0.2em;
}

.comment-form-field input[type="text"],
.comment-form-field input[type="email"],
.comment-form-field textarea {
	width: 100%;
	padding: 0.6em 0.875em;
	border: 1px solid #ddd;
	border-radius: 0.375em;
	font-size: 0.95em;
	font-family: inherit;
	color: #333;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.comment-form-field input:focus,
.comment-form-field textarea:focus {
	outline: none;
	border-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.comment-form-field textarea {
	resize: vertical;
	min-height: 7em;
	line-height: 1.6;
}

/* Cookies/remember checkbox */
.comment-form-cookies {
	margin: 0 0 1em;
	font-size: 0.82em;
	color: #888;
}

.comment-form-cookies label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}


/*────────────────────────────────────────────────────────────────────────────
 * SUBMIT BUTTON
 *────────────────────────────────────────────────────────────────────────────*/

.comment-submit-btn {
	display: inline-block;
	padding: 0.65em 2em;
	background: #1a73e8;
	color: #fff;
	border: none;
	border-radius: 0.375em;
	font-size: 0.95em;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.comment-submit-btn:hover {
	background: #1557b0;
	box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
}

.comment-submit-btn:active {
	background: #0d47a1;
}


/*────────────────────────────────────────────────────────────────────────────
 * COMMENTS PAGINATION
 *────────────────────────────────────────────────────────────────────────────*/

.comments-pagination {
	margin-top: 1.5em;
	text-align: center;
	font-size: 0.9em;
}


/*────────────────────────────────────────────────────────────────────────────
 * RESPONSIVE — below 600px
 *────────────────────────────────────────────────────────────────────────────*/

@media (max-width: 600px) {

	.comment-form-field--half {
		width: 100%;
		display: block;
		margin-right: 0;
	}

	.comment-oauth__buttons {
		flex-direction: column;
	}

	.oauth-btn {
		justify-content: center;
	}

	.comment-list .depth-2 { padding-left: 1.25em; }
	.comment-list .depth-3 { padding-left: 1.25em; }
	.comment-list .depth-4 { padding-left: 1.0em; }
	.comment-list .depth-5 { padding-left: 0.75em; }

}


/*────────────────────────────────────────────────────────────────────────────
 * MISC
 *────────────────────────────────────────────────────────────────────────────*/

li[id^="comment-"] {
	scroll-margin-top: 80px;
}

/* hide broken img icon */
.comment-avatar__img {
	display: none;
}

.comment-delete-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 0.6em;
    padding: 0.2em 0.75em 0em;
    border: 1px solid #e0a3a1;
    border-radius: 999px;
    background: #fff;
    color: #c5221f;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
	font-family: inherit;   /* match the rest of the comment text */
}

.comment-delete-btn:hover {
    background: #c5221f;
    border-color: #c5221f;
    color: #fff;
}

.comment-delete-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.comment-deleted { color: #999; font-style: italic; }

/* ── end of SECTION 5 ── */


/*══════════════════════════════════════════════════════════════════════════*\
   SECTION 6 — BLOG POST LIST
   (was blog-list.css)
   "Blog Post List" page template (page-blog.php).
\*══════════════════════════════════════════════════════════════════════════*/

/* ══════════════════════════════════════════════════════════════════
   BLOG POST LIST  (page-blog.php)
   ══════════════════════════════════════════════════════════════════ */

.blog-list-page {
    padding-bottom: 1rem;
}

.blog-list-page::after {
    content: "";
    display: table;
    clear: both;
}

/* List reset */
ul.blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.blog-list li {
    list-style: none;
}

/* Post item */
.blog-list__item {
    padding: 1.5rem 0;
    border-bottom: 2px solid #ddd;
}

.blog-list__excerpt.blog-list__excerpt{padding: 0 1em 0 0;}

/* Title */
.blog-list__title {
    margin: 0 0 0.8rem;
}

.blog-list__title a {
    color: #111;
    text-decoration: none;
}

.blog-list__title a:hover {
    color: dodgerblue;
}

/* Date */
.blog-list__date {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: #888;
    margin-bottom: 0.75rem;
}

/* Excerpt */
.blog-list__excerpt {
    color: #444;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    padding-left: 1rem;
}

.blog-list__excerpt p {
    margin: 0;
}

/* Pagination */
.blog-list__excerpt .front-view-content {
    padding-top: 1.5rem;
}

/* ── end of SECTION 6 ── */