/* FUNY PIN cross-platform UI guide
   WEB current approved guide: funy-ui-guide.css
   APP mobile/lib/theme.ts follows this guide on the next native release. */
:root{
  --funy-bg:#FFFFFF;
  --funy-surface:#FFFFFF;
  --funy-surface-soft:#FAF9FC;
  --funy-text:#181720;
  --funy-text-soft:#4D4852;
  --funy-muted:#8D8993;
  --funy-muted-2:#AAA3AF;
  --funy-line:#E9E5ED;
  --funy-divider:#F4F4F5;
  --funy-purple:#8062D8;
  --funy-purple-dark:#6749BD;
  --funy-purple-soft:#F0EBFB;
  --funy-chip:#FAF8FF;
  --funy-danger:#C62828;
  --funy-header-h:54px;
  --funy-screen-pad:14px;
  --funy-card-radius:13px;
  --funy-button-radius:12px;
  --funy-content-max:420px;
  --funy-system-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --funy-sub-header-font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --funy-back-glyph-font:Arial,Helvetica,sans-serif;
}
/* Channel headers: HOME / PICK / TALK / MY */
.portal-header{
  height:var(--funy-header-h)!important;
  min-height:var(--funy-header-h)!important;
  padding:0 var(--funy-screen-pad)!important;
  display:flex!important;
  align-items:center!important;
  background:rgba(255,255,255,.96)!important;
}
.portal-header .portal-brand{
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
}
.portal-header .portal-logo,
.portal-header .portal-logo svg,
.portal-header .portal-logo img{
  width:30px!important;
  height:34px!important;
  flex:0 0 30px!important;
  display:block!important;
  object-fit:contain!important;
}
.portal-header .portal-logo{margin-right:8px!important}
.portal-body .portal-header .portal-brand>strong,
.portal-header .portal-brand strong,
.portal-header .info-title{
  margin:0!important;
  font-family:var(--funy-system-font)!important;
  font-size:19px!important;
  line-height:24px!important;
  font-weight:800!important;
  letter-spacing:-.35px!important;
  color:var(--funy-text)!important;
}
.portal-header .portal-by{
  margin-left:8px!important;
  font-family:var(--funy-system-font)!important;
  font-size:11px!important;
  line-height:16px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  color:#85818E!important;
}
/* Sticky content below a 54px common header */
.info-tabs{top:var(--funy-header-h)!important}
html.app-shell.live-pin-page .filters{top:54px!important}
html:not(.app-shell) .portal-shell .talk-body>.filters{top:54px!important}
html:not(.app-shell) .portal-shell .popular-sort.show{top:auto!important}
html.app-shell .portal-shell .talk-body>.filters{top:0!important}
html.app-shell .portal-shell .popular-sort.show{top:auto!important}

/* Common titled sub-page header: exact back-button style from 게시글 관리 */
.funy-sub-header{
  box-sizing:border-box!important;
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  width:min(100%,var(--funy-content-max))!important;
  height:var(--funy-header-h)!important;
  min-height:var(--funy-header-h)!important;
  margin:0 auto!important;
  padding:0 var(--funy-screen-pad)!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  background:#fff!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-align:left!important;
}
.funy-sub-header .funy-sub-back,
.funy-sub-header>.back,
.funy-sub-header .top>.back{
  box-sizing:border-box!important;
  flex:0 0 36px!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  margin:0 4px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#302A35!important;
  text-decoration:none!important;
  display:grid!important;
  place-items:center!important;
  font-family:var(--funy-back-glyph-font)!important;
  font-size:29px!important;
  line-height:1!important;
  font-weight:400!important;
  cursor:pointer!important;
  transform:none!important;
}
.funy-sub-header .funy-sub-title,
.funy-sub-header>h1{
  flex:0 1 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:var(--funy-text)!important;
  font-family:var(--funy-sub-header-font)!important;
  font-size:19px!important;
  line-height:24px!important;
  font-weight:800!important;
  letter-spacing:-.35px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:left!important;
  transform:none!important;
}
.funy-sub-header>.brand:not(.funy-sub-title),
.funy-sub-header>p,
.funy-sub-header>span:not(.funy-sub-title){
  display:none!important;
}
.funy-sub-header>.top{
  display:contents!important;
}
/* MY web detail pages */
.my-head.funy-sub-header,.head.funy-sub-header{width:min(100%,420px)!important}
.my-head.funy-sub-header .my-back,.head.funy-sub-header .back{
  box-sizing:border-box!important;
  flex:0 0 36px!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  margin:0 4px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#302A35!important;
  display:grid!important;
  place-items:center!important;
  font-family:var(--funy-back-glyph-font)!important;
  font-size:29px!important;
  line-height:1!important;
  font-weight:400!important;
  transform:none!important;
}
.my-head.funy-sub-header .my-title,.head.funy-sub-header .title{
  min-width:0!important;
  font-family:var(--funy-sub-header-font)!important;
  font-size:19px!important;
  line-height:24px!important;
  font-weight:800!important;
  letter-spacing:-.35px!important;
  color:var(--funy-text)!important;
  text-align:left!important;
  transform:none!important;
}

/* FUNY PIN overflow menu guide
   Standard: use vertical kebab (⋮), not horizontal ellipsis (⋯), for item-level more/actions menus. */
.funy-kebab-button{
  box-sizing:border-box!important;
  width:34px!important;
  height:34px!important;
  padding:0!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#746C78!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-family:var(--funy-system-font)!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:0!important;
  cursor:pointer!important;
}
.funy-kebab-button:active{background:#F3F0F5!important}

/* Titleless back headers are intentionally left unchanged. */
.funy-sub-header .funy-sub-back + .funy-sub-title,
.funy-sub-header .funy-sub-back + h1.funy-sub-title{
  margin-left:0!important;
  text-align:left!important;
}

/* MY profile refinements */
.profile-edit-inline{
  border-color:#D8D6DC!important;
  background:#FFFFFF!important;
  color:#5F5B63!important;
  box-shadow:none!important;
}
.profile-edit-inline:active{background:#F5F4F6!important}
.avatar:has(>img.default-profile-icon){
  background:#F1F1F3 url('/assets/profile/default-profile.svg?v=20261018-neutral2') center/cover no-repeat!important;
}
.avatar>img.default-profile-icon{
  content:url('/assets/profile/default-profile.svg?v=20261018-neutral2')!important;
}
.menu-row[href="/my-favorites.html"] .menu-icon{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:0!important;
  line-height:1!important;
}
.menu-row[href="/my-favorites.html"] .menu-icon::before{
  content:'💜';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  transform:translateY(0);
}

/* One canonical back glyph for both 게시글 관리 (.test-back) and all guided subpages. */
.test-back,
.funy-sub-header .funy-sub-back,
.funy-sub-header>.back,
.funy-sub-header .top>.back,
.my-head.funy-sub-header .my-back,
.head.funy-sub-header .back{
  box-sizing:border-box!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#302A35!important;
  display:grid!important;
  place-items:center!important;
  font-family:var(--funy-back-glyph-font)!important;
  font-size:29px!important;
  line-height:1!important;
  font-weight:400!important;
  transform:none!important;
}

/* 2026-10-20 common back-header optical alignment
   Draw the chevron instead of relying on the ‹ font glyph so icon/title centers match across browsers. */
.test-back,
.funy-sub-header .funy-sub-back,
.funy-sub-header>.back,
.funy-sub-header .top>.back,
.my-head.funy-sub-header .my-back,
.head.funy-sub-header .back{
  position:relative!important;
  font-size:0!important;
  line-height:0!important;
  display:grid!important;
  place-items:center!important;
}
.test-back::before,
.funy-sub-header .funy-sub-back::before,
.funy-sub-header>.back::before,
.funy-sub-header .top>.back::before,
.my-head.funy-sub-header .my-back::before,
.head.funy-sub-header .back::before{
  content:""!important;
  box-sizing:border-box!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:block!important;
  width:10px!important;
  height:10px!important;
  border-right:2px solid currentColor!important;
  border-bottom:2px solid currentColor!important;
  transform:translate(-38%,-50%) rotate(135deg)!important;
  transform-origin:center!important;
  margin:0!important;
}
.test-title,
.funy-sub-header .funy-sub-title,
.funy-sub-header>h1,
.my-head.funy-sub-header .my-title,
.head.funy-sub-header .title{
  box-sizing:border-box!important;
  height:36px!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  align-self:center!important;
  margin:0!important;
  padding:0!important;
  line-height:24px!important;
}