/* 웹폰트 */
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
@font-face {
    font-family: 'GabiaCheongyeon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/GabiaCheongyeon.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Somi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_10@1.0/Somi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'KOHIBaeumOTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/KOHIBaeumOTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'EliceDigitalBaeum_Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EliceDigitalBaeum_Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'twayair';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_tway@1.0/twayair.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'NanumSquareNeo-Variable';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Danjo-bold-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Danjo-bold-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Shilla_CultureB-Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/Shilla_CultureB-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
    font-family: 'SchoolSafetyNotification';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-R.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'SchoolSafetyNotification';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-B.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}


/* 폰트 설정 */
.textggu--title3,
.textggu--title4,
.textggu--sub2,
.textggu--sub4,
.textggu--sub6,
.textggu--sub7 {
  font-family: 'SchoolSafetyNotification';
}

.textggu--title1,
.textggu--title6,
.textggu--sub3,
.textggu--title8,
.textggu--title9 {
  font-family: 'KOHIBaeumOTF';
}
.textggu--title6:after {
  font-family:'somi';
}
.textggu--title2,
.textggu--title5 {
  font-family: 'galmuri9';
}
.textggu--title7 {
  font-family: Danjo-bold-Regular;
}
.textggu--sub1 {
  font-family:'EliceDigitalBaeum_Regular';
}
.textggu--sub5,
.textggu--etc6 {
  font-family: 'galmuri11';
}
.textggu--etc7 {
  font-family: 'Paperlogy-4Regular';
}

/* 전역 설정 */
/*:root {
  --effect-text: black;
  --effect-text2: #fff;
  --effect-point: #2c8e68;
  --effect-point2: #DF1910;
  --effect-point3: #a0d7b9;
  --effect-point4: #DBCDA7;
  
}*/
:root {
    /* ── 텍꾸 색상 팔레트: 서식마다 역할에 맞는 변수를 골라 쓰고, 값은 모두 사이트 변수에서 가져옴 ── */
    --effect-text: var(--content-font-color);                 /* 본문 글자색 (윤곽선·그림자·아이콘 등 글자와 같은 계열) */
    --effect-text2: var(--card-bg-color);                     /* 글자색과 대비되는 바탕색 (카드 배경) */
    --effect-point: var(--accent-color);                      /* 포인트: 막대·선·강조 면·테두리 */
    --effect-point2: var(--secondary-color);                  /* 보조 포인트: 리본 등 두 번째 색 */
    --effect-point3: color-mix(in srgb, var(--effect-point) 22%, var(--effect-text2));
                                                              /* 포인트의 연한 면 색: 테마를 따라 밝거나 어두워서 --effect-text 글자가 항상 읽힘 */
    --effect-point4: var(--primary-color);                    /* 부제·주석 글자색 */
    --effect-soft: color-mix(in srgb, var(--effect-point) 55%, #fff);
                                                              /* 밝은 포인트: 네온·리본 위 글자처럼 밝게 보여야 하는 글자색 */
    --effect-on-point: var(--btn-accent-text, #fff);          /* 포인트 색 면 위에 올리는 글자색 */
}

/* _manager.css.php에 편입시키면 위의 코드를
--effect-point: <?=$css['color_point'][0]?>; 로 수정하여
아보카도 관리자 설정의 포인트 색상을 자동 불러오기 할 수 있습니다 */

/* 서식들 */
.textggu--title1 {
    display: inline-block;
    font-size: 40px;
    line-height: 1em;
    margin-top: 0.2em;
    text-fill-color: var(--tg-title1-color, transparent);
    -webkit-text-fill-color: var(--tg-title1-color, transparent);
    text-stroke-width: 1px;
    -webkit-text-stroke-width: 1px;
    text-stroke-color: var(--tg-title1-stroke, var(--effect-text));
    -webkit-text-stroke-color: var(--tg-title1-stroke, var(--effect-text));
    text-shadow: 2px 2px var(--tg-title1-shadow, var(--effect-point));
}

.textggu--title2 {
      font-size: 25px;
    line-height: 35px;
    color: var(--tg-title2-color, var(--effect-text2));
    text-shadow: -1px 0px 0px var(--tg-title2-outline, var(--effect-point)), 1px 0px 0px var(--tg-title2-outline, var(--effect-point)),0px 1px 0px var(--tg-title2-outline, var(--effect-point)), 0px -1px 0px var(--tg-title2-outline, var(--effect-point)), 0px 0px 4px var(--tg-title2-shadow, color-mix(in srgb, var(--effect-text) 70%, transparent));
  font-weight:bold;
}
.textggu--title3 {
  background-image: url(https://images.unsplash.com/photo-1621799754526-a0d52c49fad5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 25px;
    line-height: 35px;
  animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-name: background--flow;
    background-size: 200%;
  filter: drop-shadow(0px 0px 3px var(--tg-title3-shadow, #a8c8b0));
}
@keyframes background--flow {
  0% {
    background-position-y: 0%;
}
100% {
    background-position-y: 100%;
}
}
.textggu--title4 {
    color: var(--tg-title4-colorb, var(--effect-point));
    font-size: 25px;
    line-height: 35px;
    background-size: 100%;
    filter: drop-shadow(0px 0px 3px color-mix(in srgb, var(--tg-title4-shadow, var(--effect-text2)) 30%, transparent));
    animation: neon-text infinite 5s;
}
@keyframes neon-text {
  0% {
    color: var(--tg-title4-colorb, var(--effect-point));
    filter: drop-shadow(0px 0px 3px color-mix(in srgb, var(--tg-title4-shadow, var(--effect-text2)) 30%, transparent));
  }
  50% {
    color: var(--tg-title4-colorb, var(--effect-point));
    filter: drop-shadow(0px 0px 10px color-mix(in srgb, var(--tg-title4-shadow, var(--effect-text2)) 60%, transparent));
  }
  69% {
    color: var(--tg-title4-colorb, var(--effect-point));
    filter: drop-shadow(0px 0px 3px color-mix(in srgb, var(--tg-title4-shadow, var(--effect-text2)) 40%, transparent));
  }
  70% {
    color: var(--tg-title4-colora, color-mix(in srgb, var(--effect-point) 35%, var(--effect-text2)));
    filter: drop-shadow(0px 0px 0px color-mix(in srgb, var(--tg-title4-shadow, var(--effect-text2)) 60%, transparent));
  }
  75% {
    color: var(--tg-title4-colora, color-mix(in srgb, var(--effect-point) 35%, var(--effect-text2)));
    filter: drop-shadow(0px 0px 0px color-mix(in srgb, var(--tg-title4-shadow, var(--effect-text2)) 60%, transparent));
  }
  80% {
    color: var(--tg-title4-colorb, var(--effect-point));
    filter: drop-shadow(0px 0px 3px color-mix(in srgb, var(--tg-title4-shadow, var(--effect-text2)) 60%, transparent));
  }
  81% {
    color: var(--tg-title4-colora, color-mix(in srgb, var(--effect-point) 35%, var(--effect-text2)));
    filter: drop-shadow(0px 0px 0px color-mix(in srgb, var(--tg-title4-shadow, var(--effect-text2)) 60%, transparent));
  }
  100% {
    color: var(--tg-title4-colorb, var(--effect-point));
    filter: drop-shadow(0px 0px 3px color-mix(in srgb, var(--tg-title4-shadow, var(--effect-text2)) 30%, transparent));
  }
}
.textggu--title5 {
  font-weight:bold;
  font-size: 16px;
  line-height: 30px;
  padding: 7px 16px;
  background: var(--tg-title5-bg, #fff);
  border: 1px solid var(--tg-title5-border, #222);
  border-radius: 0px 0px 3px 3px;
  position:relative;
  display: inline-block;
  filter:drop-shadow(8px 5px 0px var(--tg-title5-shadow, #222));
  margin: 16px 10px 19px 0px;
  transition-duration: .5s;
  color: var(--tg-title5-color, #222);
}
.textggu--title5:hover {
  translate: 6px 3px;
  filter:drop-shadow(2px 2px 0px var(--tg-title5-shadow, #222));
}
.textggu--title5:before {
  
  content: '\3161   \1F5D7   \1F5D9';   /* ㅡ  🗗  🗙 — 글자 대신 코드로 적어 CSS 파일의 문자 인코딩이 어긋나도 깨지지 않게 함 */
  font-size: 12px;
  width: calc(100% + 2px);
  height: 15px;
  line-height:9px;
  border-radius: 3px 3px 0px 0px;
  color: var(--tg-title5-barcolor, #fff);
  text-align:right;
  padding: 1px;
  box-sizing:border-box;
  background: var(--tg-title5-bar, var(--effect-point));
  border: 1px solid var(--tg-title5-border, #222);
  position: absolute;
  top: -15px;
  left: -1px;
  transition-duration: .5s;
}
.textggu--title5:hover:before {
  background: #222;
  color: #fff;
}
.textggu--title5:after {
  content:'';
  position:absolute;
  background: url(https://cdn.pixabay.com/photo/2012/04/01/12/38/cursor-23229_960_720.png) 100%; 
    width: 16px;
    height: 30px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    right: -10px;
    top: 29px;
}
.textggu--title6 {
  color: var(--tg-title6-color, inherit);
  display: inline-block;
  position:relative;
  font-size: 40px;
  line-height: 1em;
  margin-top: 0.2em;
  letter-spacing:-3px;
  margin-bottom: 0.2em;
}
.textggu--title6:after {
  content:attr(data-text);
  font-size: 25px;
  color: var(--tg-title6-sub, var(--effect-point));
  position:absolute;
  left:0;
  width: max-content;
  bottom: -10px;
}
.textggu--title7 {
  font-size: 24px;
  line-height: 26px;
  height: 42px;
  display: inline-block;
  color: var(--tg-title7-color, var(--effect-soft));
  background: var(--tg-title7-bg, var(--effect-point));
  translate: 15px 0px;
  /*margin: 3px 44px 3px 8px;*/
  padding: 7px 20px;
  border-top: 2px solid var(--tg-title7-line, var(--effect-point3));
  border-bottom: 2px solid var(--tg-title7-line, var(--effect-point3));
  position:relative;
  filter: drop-shadow(3px 0px 0px var(--tg-title7-bg, var(--effect-point)))
    drop-shadow(0px 3px 0px var(--tg-title7-bg, var(--effect-point)))
     drop-shadow(-3px 0px 0px var(--tg-title7-bg, var(--effect-point)))
     drop-shadow(0px -3px 0px var(--tg-title7-bg, var(--effect-point)));
  letter-spacing:-2px;
}
.textggu--title7:before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0;
  width: 0;
  height: 0;
  border-right: 0px solid var(--tg-title7-bg, var(--effect-point));
  border-bottom: 19px solid var(--tg-title7-bg, var(--effect-point));
  border-left: 20px solid transparent;
  border-top: 19px solid var(--tg-title7-bg, var(--effect-point));
  filter: drop-shadow(0px 2px 0px var(--tg-title7-line, var(--effect-point3)))
    drop-shadow(0px -2px 0px var(--tg-title7-line, var(--effect-point3)));
}
.textggu--title7:after {
  z-index:1;
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 19px solid var(--tg-title7-bg, var(--effect-point));
  border-left: 0px solid var(--tg-title7-bg, var(--effect-point));
  border-top: 19px solid var(--tg-title7-bg, var(--effect-point));
  filter: drop-shadow(0px 2px 0px var(--tg-title7-line, var(--effect-point3)))
    drop-shadow(0px -2px 0px var(--tg-title7-line, var(--effect-point3)));
}

.textggu--title8 {
  color: var(--tg-title8-color, inherit);
  display: inline-block;
  position:relative;
  font-size: 200%;
  line-height: 1em;
  margin-top: 1.2em;
  letter-spacing:3px;
  margin-bottom: 0.2em;
}
.textggu--title8:after {
 color: var(--tg-title8-sub, var(--effect-point));
  content:attr(data-text);
  top: -100%;
  font-size: 50%;
  position:absolute;
  left:0%;
  width:100%;
  white-space : nowrap;
}
.textggu--title9 {
  color: var(--tg-title9-color, inherit);
  display: inline-block;
  position:relative;
  font-size: 200%;
  line-height: 1em;
  margin-top: 1.2em;
  letter-spacing:3px;
  margin-bottom: 0.2em;
  text-align : center
}
.textggu--title9:after {
 color: var(--tg-title9-sub, var(--effect-point));
  content:attr(data-text);
  top: -100%;
  font-size: 50%;
  position:absolute;
  left:0%;
  width:100%;
  white-space : nowrap;
}

.textggu--sub1 {
  color: var(--tg-sub1-color, inherit);
  /*display:inline-block;*/
	position:relative;
	font-weight:bold;
	font-size:16px;
	line-height:100%;
	overflow:hidden;
	margin: 3px 0px -4px 0px;
	padding: 0px 10px 0px 0px;
}
.textggu--sub1:before {
	display:inline-block;
	content:'';
	background: var(--tg-sub1-bar, var(--effect-point));
	width: 7px;
	height: 20px;
	vertical-align:middle;
	margin:2px 5px 0px 0px;
  translate:0px -2px;
  border-radius: 5px;
}

.textggu--sub2 {
  position: relative;
  /*color: var(--effect-text);*/
  color: var(--tg-sub2-color, var(--effect-text));
  background-color: var(--tg-sub2-bg, var(--effect-point3));
  padding: 5px;
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;
  display: inline-block;
	margin: 1px 8px;
}
.textggu--sub2::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0;
  width: 0;
  height: 0;
  border-right: 7px solid var(--tg-sub2-bg, var(--effect-point3));
  border-bottom: 25px solid transparent;
}
.textggu--sub2::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 7px solid var(--tg-sub2-bg, var(--effect-point3));
  border-top: 25px solid transparent;
}
.textggu--sub3 {
  color: var(--tg-sub3-color, inherit);
  display: inline-block;
  padding: 8px 8px 3px 8px;
  margin: 2px;
  font-size: 16px;
  position: relative;
}
.textggu--sub3::before,
.textggu--sub3::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  transition: 0.35s;
  background: transparent;
  z-index: 1;
}
.textggu--sub3::before {
  top: 0;
  left: 0;
  /*border-left: 4px solid var(--tg-sub3-line, var(--effect-point));
  border-top: 4px solid var(--tg-sub3-line, var(--effect-point));*/
  border-left: 4px solid var(--tg-sub3-line, var(--effect-point));
  border-top: 4px solid var(--tg-sub3-line, var(--effect-point));  
}
.textggu--sub3::after {
  bottom: 0;
  right: 0;
  /*border-right: 4px solid var(--tg-sub3-line, var(--effect-point));
  border-bottom: 4px solid var(--tg-sub3-line, var(--effect-point));*/
  border-right: 4px solid var(--tg-sub3-line, var(--effect-point));
  border-bottom: 4px solid var(--tg-sub3-line, var(--effect-point));
}
.textggu--sub4 {
  color: var(--tg-sub4-color, inherit);
  display: inline-block;
  padding: 8px 20px;
  margin: 2px;
  font-size: 16px;
  position: relative;
}
.textggu--sub4::before,
.textggu--sub4::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  transition: 0.35s;
  background: transparent;
  z-index: 1;
}
.textggu--sub4::before {
  top: 2px;
  left: -2px;
  /*border-left: 6px double var(--tg-sub4-line, var(--effect-point));
  border-top: 6px double var(--tg-sub4-line, var(--effect-point));*/
  border-left: 6px double var(--tg-sub4-line, var(--effect-point));
  border-top: 6px double var(--tg-sub4-line, var(--effect-point));
}
.textggu--sub4::after {
  bottom: -3px;
  right: -3px;
  /*border-right: 6px double var(--tg-sub4-line, var(--effect-point));
  border-bottom: 6px double var(--tg-sub4-line, var(--effect-point));*/
  border-right: 6px double var(--tg-sub4-line, var(--effect-point));
  border-bottom: 6px double var(--tg-sub4-line, var(--effect-point));
}
.textggu--sub5 {
  color: var(--tg-sub5-color, inherit);
  display: inline-block;
  padding: 8px 8px 3px 8px;
  margin: 2px;
  font-size: 16px;
  line-height: 16px;
  position: relative;
  background: linear-gradient(to right, var(--tg-sub5-bg, var(--effect-point3)), transparent);
  background-size: 90% 40%;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  font-weight:bold;
}
.textggu--sub6--circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size:15px;
  line-height: 1;
  color: var(--tg-sub6-color, #fff);
  padding:10px;
  width:40px;
  height:40px;
  background: var(--tg-sub6-bg, var(--effect-point));
  position:relative;
  border-radius:100%;
  margin:3px 0px 3px -6px;
}
.textggu--sub7--text {
  rotate:-45deg;
  color: var(--tg-sub7-color, #fff);
}
.textggu--sub7--square {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size:15px;
  line-height: 1;
  padding:5px;
  width:30px;
  height:30px;
  border-radius: 10px;
  background: var(--tg-sub7-bg, var(--effect-point));
  position:relative;
  rotate:45deg;
  margin:10px 0px 10px 2px;
}

.textggu--etc1 {
    color: var(--tg-etc1-color, inherit);
    background: linear-gradient(45deg,
color-mix(in srgb, var(--tg-etc1-bg, var(--effect-point)) 50%, transparent),
color-mix(in srgb, var(--tg-etc1-bg, var(--effect-point)) 30%, transparent));
    border-left: 3px solid
color-mix(in srgb, var(--tg-etc1-bg, var(--effect-point)) 50%, transparent);
    border-right: 3px solid
color-mix(in srgb, var(--tg-etc1-bg, var(--effect-point)) 10%, transparent);
}
.textggu--etc2 {
  color: var(--tg-etc2-color, inherit);
  background: linear-gradient(45deg, var(--tg-etc2-bg, #e5603f6b), var(--tg-etc2-bg, #e5603f3b));
  border-left: 3px solid var(--tg-etc2-border, #e5603f88);
  border-right: 3px solid var(--tg-etc2-border, #e5603f3a);
}
/* 기타3: 형광펜 효과 (Christian Alder 의 CodePen "Nice <mark>" 를 텍꾸용으로 옮김)
   ::before = 거친 가장자리의 형광펜 자국, ::after = 펜을 오래 댄 끝의 번짐.
   · 형광펜 색은 --tg-etc3-bg, 글자색은 --tg-etc3-color (위젯 설정에서 지정)
   · 거친 가장자리는 SVG 필터(feTurbulence + feDisplacementMap)를 data URI 로 직접 넣어서 따로 준비할 것이 없음
   · 알려진 한계(원작도 동일): inline-block 이라 줄이 길어 두 줄로 꺾이면 효과가 어긋남 → 짧은 말에 쓰는 것을 권장 */
.textggu--etc3 {
  --tgm-rough: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3C/svg%3E#r");
  --tgm-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tgm-color: var(--tg-etc3-bg, color-mix(in srgb, var(--effect-point) 35%, #fff));
  position: relative;
  display: inline-block;
  isolation: isolate;
  margin: 0 .35ch;
  background: none;
  color: var(--tg-etc3-color, #222);
}
/* 포인트 색과 같은 계열(색상·채도 유지)의 밝은 색: 밝기만 고정해서 포인트 색이 어두워도/밝아도 형광펜처럼 환하게 */
@supports (color: oklch(from red l c h)) {
  .textggu--etc3 {
    --tgm-color: var(--tg-etc3-bg, oklch(from var(--effect-point) 0.88 calc(c * 0.9) h));
  }
}
.textggu--etc3::before {
  content: '';
  position: absolute;
  inset: 0;
  width: calc(100% + 1ch);
  left: -.25ch;
  height: 110%;
  top: -5%;
  border-bottom-right-radius: 20px 30px;
  background-color: var(--tgm-color);
  background-image: var(--tgm-noise);
  opacity: .75;
  box-shadow:
    inset -2px 0px 1px color-mix(in srgb, var(--tgm-color), #000 20%),
    inset -4px 0px 5px color-mix(in srgb, var(--tgm-color), #000 20%);
  filter: var(--tgm-rough);
  z-index: -1;
}
.textggu--etc3::after {
  content: '';
  position: absolute;
  height: 1ch;
  width: .5ch;
  top: 2px;
  right: -.25em;
  background: radial-gradient(
    color-mix(in srgb, var(--tgm-color), #000 30%),
    var(--tgm-color)
  );
  opacity: .4;
  border-radius: 10px 0 50px/200px 0;
  rotate: 15deg;
  filter: var(--tgm-rough);
  z-index: -1;
}
/* 기타4: 기타3과 같은 형광펜 효과 (색은 --tg-etc4-bg / --tg-etc4-color 로 따로 지정) */
.textggu--etc4 {
  --tgm-rough: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3C/svg%3E#r");
  --tgm-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tgm-color: var(--tg-etc4-bg, color-mix(in srgb, var(--effect-point) 35%, #fff));
  position: relative;
  display: inline-block;
  isolation: isolate;
  margin: 0 .35ch;
  background: none;
  color: var(--tg-etc4-color, #222);
}
/* 포인트 색과 같은 계열(색상·채도 유지)의 밝은 색: 밝기만 고정해서 포인트 색이 어두워도/밝아도 형광펜처럼 환하게 */
@supports (color: oklch(from red l c h)) {
  .textggu--etc4 {
    --tgm-color: var(--tg-etc4-bg, oklch(from var(--effect-point) 0.88 calc(c * 0.9) h));
  }
}
.textggu--etc4::before {
  content: '';
  position: absolute;
  inset: 0;
  width: calc(100% + 1ch);
  left: -.25ch;
  height: 110%;
  top: -5%;
  border-bottom-right-radius: 20px 30px;
  background-color: var(--tgm-color);
  background-image: var(--tgm-noise);
  opacity: .75;
  box-shadow:
    inset -2px 0px 1px color-mix(in srgb, var(--tgm-color), #000 20%),
    inset -4px 0px 5px color-mix(in srgb, var(--tgm-color), #000 20%);
  filter: var(--tgm-rough);
  z-index: -1;
}
.textggu--etc4::after {
  content: '';
  position: absolute;
  height: 1ch;
  width: .5ch;
  top: 2px;
  right: -.25em;
  background: radial-gradient(
    color-mix(in srgb, var(--tgm-color), #000 30%),
    var(--tgm-color)
  );
  opacity: .4;
  border-radius: 10px 0 50px/200px 0;
  rotate: 15deg;
  filter: var(--tgm-rough);
  z-index: -1;
}
.textggu--etc5 {
    display: inline-block;
    padding: 1px 7px;
    margin: 2px 0;
    border-radius: 5px;
    color: var(--tg-etc5-color, var(--tg-etc5-border, var(--effect-point)));
    background: var(--tg-etc5-bg, var(--effect-point3));
    border: 1px solid var(--tg-etc5-border, var(--effect-point));
    font-weight: bold;
    transition-duration: .2s;
}
.textggu--etc5:hover {
  translate: 0px -3px;
  box-shadow:0px 3px 0px var(--tg-etc5-border, var(--effect-point));
}
.textggu--etc6 {
  font-weight: bold;
    display: inline-block;
    padding: 0 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    background: var(--tg-etc6-bg, var(--effect-point));
    color: var(--tg-etc6-color, #fff);
    border: 2px solid var(--tg-etc6-border, var(--effect-point));
    transition-duration: 0.2s;
}
.textggu--etc6:hover {
  color: var(--tg-etc6-hovercolor, var(--tg-etc6-bg, var(--effect-point)));
  background: var(--effect-point3);
    border: 2px solid var(--effect-point);
    box-shadow: 1px 1px 0px transparent;
    transform: translateX(1px) translateY(1px);
}
.textggu--etc8 {
    color: var(--tg-etc8-color, inherit);
  /*font-weight: bold;
  color: var(--effect-text);
    background: linear-gradient(to right, var(--effect-text), var(--effect-text));
    padding: 2px 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 0px var(--effect-point);*/
    border-bottom: 3px double var(--tg-etc8-border, #e53935);
    border-radius: 5px 5px 0px 0px;
}

.textggu--etc7 {
    font-weight: bold;
    color: var(--tg-etc7-color, var(--effect-soft));
    text-shadow: -1px -1px 1px var(--tg-etc7-outline, var(--effect-point)), 1px -1px 1px var(--tg-etc7-outline, var(--effect-point)), -1px 1px 1px var(--tg-etc7-outline, var(--effect-point)), 1px 1px 1px var(--tg-etc7-outline, var(--effect-point));
}



  .textggu--etc9{background-color: var(--tg-etc9-bg, #0172BD);/* background-size: 10px; *//* height: 10px; */color: var(--tg-etc9-color, white);/* border: 1px solid #0172BD; */border-radius: 10px;font-weight: bold;box-shadow: 0px 0px 5px 4px var(--tg-etc9-shadow, #0172BD);padding: 0 5px;}

  
  .textggu--quo1 {
    color: var(--tg-quo1-color, inherit);
    display: block;
    border-left: 2px solid var(--tg-quo1-line, var(--effect-point));
    background: var(--tg-quo1-bg, color-mix(in srgb, var(--effect-point) 20%, transparent));
    border-radius: 0px 5px 5px 0px;
    /*line-height: 1.8em;*/
    padding: 1.3em 2em;
    position: relative;
    transition: 0.2s border ease-in-out;
    z-index: 0;
  margin-top: 40px;
  margin-bottom: 5px;
    margin-left: 11px;
}

.textggu--quo1:before
{
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    height: 2em;
    /*background-color: #f2f2f2;*/
    width: 5px;
    margin-top: -1em;
}

.textggu--quo1:after
{
    content: "\275D";   /* ❝ */
    position: absolute;
    top: -15px;
    left: -0.5em;
    color: var(--tg-quo1-line, var(--effect-point));
    font-size: 30px;
    font-style: normal;
    line-height: 1em;
    text-align: center;
    text-indent: -2px;
    width: 1em;
    margin-top: -0.5em;
    transition: 0.2s all ease-in-out, 0.4s transform ease-in-out;
}

.textggu--quo2 {
    color: var(--tg-quo2-color, inherit);
    display: block;
    padding: 1.3em 2em;
    margin: 4px 0;
    background: var(--tg-quo2-bg, color-mix(in srgb, var(--effect-point) 20%, transparent));
    border-radius: 5px;
    letter-spacing: -0.2px;
}

  .textggu--quo3 {
    color: var(--tg-quo3-color, inherit);
    display: inline-block;
    padding:8px 16px;
    margin:4px 0;
    background: var(--tg-quo3-bg, color-mix(in srgb, var(--effect-point) 20%, transparent));
    border-radius: 5px;
    letter-spacing:-0.2px;
  }

  .textggu--code {

    /* box-shadow: 0 0 3px rgb(0, 0, 0, 0.2); */

    padding: 2px 8px;
    border-radius: 5px;
    background-color: var(--tg-code-bg, #3535358c);
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -.4px;
    color: var(--tg-code-color, #e0e0e0);
}

.textggu--summary {
  display: none;
  padding: 10px;
  border: 1px solid var(--effect-point3);
  border-radius: 5px;
  margin-bottom: 5px;
}

.textggu--summary.is-open {
  display: block;
    border: 1px solid var(--tg-summary-boxborder, var(--effect-point)) !important;
    background: var(--tg-summary-boxbg, color-mix(in srgb, var(--effect-point) 20%, transparent)) !important;
  /*background-color: var(--effect-point2);
  color: var(--effect-point4);
  border: 1px solid var(--effect-point4);*/
}

.textggu--summary--btn {
  display: inline-block;
  border: 1px solid var(--tg-summary-btnborder, color-mix(in srgb, var(--effect-text) 35%, transparent)) !important;
  background-color: var(--tg-summary-btnbg, color-mix(in srgb, var(--effect-text) 10%, transparent)) !important;
  color: var(--tg-summary-btncolor, color-mix(in srgb, var(--effect-text) 60%, transparent)) !important;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 5px;
  margin-bottom: 5px;
  transition: background-color 0.2s ease;
}

.textggu--summary--btn:hover {
  border: 1px solid var(--tg-summary-hover, var(--effect-point)) !important;
    color: var(--tg-summary-hover, var(--effect-point)) !important;
    background: color-mix(in srgb, var(--tg-summary-hover, var(--effect-point)) 20%, transparent) !important;
  /*background-color: var(--effect-point2);
  color: var(--effect-point4);
  border: 1px solid var(--effect-point4);*/
}

.textggu--summary-wrap {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  vertical-align: top;
}

.textggu--summary {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
}

.textggu--summary .textggu--quo1 {
  display: block;
}


/* 주석 (annotation). 예전 글에 저장된 textggu--comment 클래스도 계속 보이도록 아래에 같이 지정해 둠 — 더는 필요 없으면 .textggu--commentN 줄을 지워도 됨 */
  .textggu--annotation1,
  [class~="textggu--comment1"] {
    color: var(--tg-annotation1-color, var(--effect-point4));
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
  }
  .textggu--annotation2,
  [class~="textggu--comment2"] {
    color: var(--tg-annotation2-color, var(--effect-point4));
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: -0.25em;
  }
  .textggu--annotation3,
  [class~="textggu--comment4"] {
    color: var(--tg-annotation3-color, inherit);
    display: inline-block;
    position:relative;
    font-size: 120%;
    font-weight: bold;
    line-height: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.1em;
    text-align : center; 
  }
  .textggu--annotation3:after,
  [class~="textggu--comment4"]:after {
    color: var(--tg-annotation3-sub, var(--effect-point4));
    content:attr(data-text);
    top: -100%;
    font-size: 70%;
    font-weight: lighter;
    position:absolute;
    left:0%;
    width:100%;
    white-space : nowrap;
  }

.textggu--balloon1 {
  border-image: url(/widget/widget_a_textggu/img/talk1.png);
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 0px 7px;
  height: 22px;
  border-image-width: 30px 30px;
  border-image-slice: 20;
  border-image-repeat: round;
  color: var(--tg-balloon1-color, black);
}

.textggu--balloon2 {
  border-image: url(/widget/widget_a_textggu/img/talk2.png);
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 0px 7px;
  height: 22px;
  border-image-width: 30px 30px;
  border-image-slice: 20;
  border-image-repeat: round;
  color: var(--tg-balloon2-color, white);
}

  .textggu--balloon3 {
  border-image: url(/widget/widget_a_textggu/img/talk3.png);
  width: fit-content;
  align-items: center;
  padding: 5px 10px;
  height: 28px;
  border-image-width: 30px 30px;
  border-image-slice: 17;
  border-image-repeat: round;
  font-size: 110%;
  font-weight: bold;
  font-style: italic;
  color: var(--tg-balloon3-color, black);
  filter:drop-shadow(0px 0px 0px black);
}

.textggu--balloon4 {
  border-image: url(/widget/widget_a_textggu/img/talk4.png);
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 0px 12px;
  height: 22px;
  border-image-width: 30px 30px;
  border-image-slice: 17;
  border-image-repeat: round;
  color: var(--tg-balloon4-color, black);
}


.textggu--checkbox {
    color: var(--tg-checkbox-color, inherit);
    display: block;
    margin: 2px 0;
    cursor: default;
}

/* disabled 체크박스는 브라우저가 accent-color 를 무시하고 회색으로 그리므로, 직접 그린다 (색은 위젯 설정/사이트 변수를 따름) */
.textggu--checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    flex: none;
    box-sizing: border-box;
    width: 1.1em;
    height: 1.1em;
    margin: 0 6px 0 0;
    vertical-align: -0.2em;
    border: 1.5px solid var(--tg-checkbox-border, color-mix(in srgb, var(--effect-text) 45%, transparent));
    border-radius: 3px;
    background: var(--tg-checkbox-bg, #fff) center / 80% no-repeat;
    opacity: 1;
    cursor: default;
}
.textggu--checkbox input[type="checkbox"]:checked {
    border-color: var(--tg-checkbox-accent, var(--accent-color));
    background-color: var(--tg-checkbox-accent, var(--accent-color));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.textggu--checkbox input[type="checkbox"]:checked + span {
    text-decoration: line-through;
    opacity: .7;
}

/* 줄 전체를 차지하는 블록(인용·나레) 뒤의 자동 <br> 은 빈 줄을 하나 더 만들므로 숨김 */
.textggu--quo1 + br,
.textggu--quo2 + br { display: none; }


/* ─────────────────────────────────────────────
   위젯 전용 스타일 (에디터 텍꾸 메뉴 · 블러 · 효과 등) — 이전 tgw.css 를 합침
   ───────────────────────────────────────────── */
/* 텍꾸 위젯 전용 스타일 (본체 스타일은 textggu.css) */

/* ── 텍스트 효과 (default.css.php 에 따로 붙여 두었던 규칙) ── */
span.blur-txt { filter: blur(5px); color: currentColor; cursor: pointer; }
span.none-blur { filter: blur(0px); font-family: inherit; }
span.italictext { font-style: italic; font-family: inherit; }
span.txt-box {
  color: var(--tg-txtbox-color, #3f3f3f);
  background-color: var(--tg-txtbox-bg, #e8e8e8);
  border: 1px solid var(--tg-txtbox-border, #cecece);
  font-family: var(--text-font);
  padding: 2px 5px;
  border-radius: 5px;
}
span.big-subtitle { font-size: 1.25em; font-weight: 700; }

/* 체크박스(치환자) */
.markdown-label { display: flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.markdown-checkbox {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  position: absolute; opacity: 0; width: 1rem; height: 1rem; pointer-events: none;
}

/* ── 에디터 툴바의 텍꾸 버튼 ── */
.tgw-btn { cursor: pointer; }
.tgw-btn.is-open { background: rgba(0, 0, 0, 0.08); }

/* ── 텍꾸 메뉴 ── */
.tgw-menu {
  display: none;
  position: fixed;
  z-index: 100030;
  box-sizing: border-box;
  width: 320px;
  max-width: calc(100vw - 16px);
  max-height: min(420px, 68vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  background: #fff;
  color: #333;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.tgw-menu.show { display: block; }
.tgw-group { padding: 10px 0; border-top: 1px solid #f1f5f9; }
.tgw-group:first-child { padding-top: 0; border-top: 0; }
.tgw-group > strong {
  display: block; margin: 0 0 8px;
  color: #64748b; font-size: 11px; font-weight: 700; line-height: 1;
}
.tgw-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tgw-item {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 100%; height: 46px; min-height: 46px;
  padding: 4px 6px; margin: 0;
  border: 1px solid #e2e8f0; border-radius: 4px; background: #fff;
  overflow: hidden; line-height: 1.2; cursor: pointer; font: inherit; color: inherit;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.tgw-item:hover, .tgw-item:focus-visible {
  background: #f8fafc; border-color: #cbd5e1; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); outline: none;
}
.tgw-item > span, .tgw-item > strong {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 100%; max-height: 36px;
  pointer-events: none; white-space: nowrap;
  transform: scale(0.58); transform-origin: center;
}
.tgw-item > .italictext, .tgw-item > .txt-box, .tgw-item > .blur-txt, .tgw-item > strong { transform: none; }
.tgw-item > [class^="textggu--sub"], .tgw-item > [class^="textggu--etc"] { transform: scale(0.78); }
.tgw-item > .blur-txt { filter: none; }