/**
 * WP Article Decorator - Front-end CSS
 * 全装飾機能のフロントエンド用スタイル
 */

/* ============================================================
 * 共通変数
 * ============================================================ */
:root {
	--wad-radius     : 6px;
	--wad-border     : 1px solid #ddd;
	--wad-shadow     : 0 2px 8px rgba(0,0,0,.1);
	--wad-color-info    : #3b82f6;
	--wad-color-point   : #f59e0b;
	--wad-color-check   : #22c55e;
	--wad-color-caution : #f97316;
	--wad-color-warning : #ef4444;
}

/* ============================================================
 * 共通リセット（テーマ干渉対策）
 * ============================================================ */
.wad-callout,
.wad-box,
.wad-list,
.wad-steps,
.wad-image,
.wad-columns,
.wad-blogcard,
.wad-balloon {
	box-sizing : border-box;
	max-width  : 100%;
}
.wad-callout *,
.wad-box *,
.wad-list *,
.wad-steps *,
.wad-image *,
.wad-columns *,
.wad-blogcard *,
.wad-balloon * {
	box-sizing : border-box;
}
.wad-callout__body > :first-child,
.wad-box__body > :first-child,
.wad-steps__body > :first-child,
.wad-columns__col > :first-child,
.wad-blogcard__body > :first-child,
.wad-balloon__body > :first-child {
	margin-top : 0 !important;
}
.wad-callout__body > :last-child,
.wad-box__body > :last-child,
.wad-steps__body > :last-child,
.wad-columns__col > :last-child,
.wad-blogcard__body > :last-child,
.wad-balloon__body > :last-child {
	margin-bottom : 0 !important;
}
.wad-image img,
.wad-columns img,
.wad-blogcard img,
.wad-balloon img {
	max-width : 100%;
	height    : auto;
}

/* ============================================================
 * コールアウトボックス
 * ============================================================ */
.wad-callout {
	display     : flex;
	align-items : flex-start;
	gap         : .75em;
	padding     : 1em 1.25em;
	border-left : 4px solid currentColor;
	border-radius : 0 var(--wad-radius) var(--wad-radius) 0;
	margin      : 1.5em 0;
}
.wad-callout__icon {
	font-size   : 1.25em;
	line-height : 1;
	flex-shrink : 0;
}
.wad-callout__body { flex: 1; }

.wad-callout--info    { color: var(--wad-color-info);    background: #eff6ff; }
.wad-callout--point   { color: var(--wad-color-point);   background: #fffbeb; }
.wad-callout--check   { color: var(--wad-color-check);   background: #f0fdf4; }
.wad-callout--caution { color: var(--wad-color-caution); background: #fff7ed; }
.wad-callout--warning { color: var(--wad-color-warning); background: #fef2f2; }

/* ============================================================
 * ボックス装飾
 * ============================================================ */
.wad-box {
	margin        : 1.5em 0;
	border-radius : var(--wad-radius);
	overflow      : hidden;
	--wad-box-accent          : #3b82f6;
	--wad-box-border          : #ddd;
	--wad-box-title-bg        : #f5f5f5;
	--wad-box-title-color     : inherit;
	--wad-box-soft-bg         : #f9f9f9;
	--wad-box-fill-body-bg    : #fff;
	--wad-box-fill-title-color: #fff;
}
.wad-box__title {
	padding     : .6em 1em;
	font-weight : bold;
	display     : flex;
	align-items : center;
	gap         : .55em;
}
.wad-box__title-text { min-width: 0; }
.wad-box__title-icon {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	flex            : 0 0 auto;
	width           : 1.45em;
	height          : 1.45em;
	border-radius   : 999px;
	background      : transparent;
	color           : var(--wad-box-accent);
	line-height     : 1;
}
.wad-box__title-icon::before {
	font-size   : .95em;
	line-height : 1;
}
.wad-box__title-icon[data-wad-title-icon="info"]::before { content: 'ℹ️'; }
.wad-box__title-icon[data-wad-title-icon="point"]::before { content: '⭐'; }
.wad-box__title-icon[data-wad-title-icon="check"]::before { content: '✅'; }
.wad-box__title-icon[data-wad-title-icon="caution"]::before { content: '⚠️'; }
.wad-box__title-icon[data-wad-title-icon="warning"]::before { content: '❌'; }
.wad-box__body  { padding: 1em; }

/* カラープリセット */
.wad-box--gray {
	--wad-box-accent          : #6b7280;
	--wad-box-border          : #9ca3af;
	--wad-box-title-bg        : #f3f4f6;
	--wad-box-title-color     : #111827;
	--wad-box-soft-bg         : #f9fafb;
	--wad-box-fill-title-color: #fff;
}
.wad-box--blue {
	--wad-box-accent          : #3b82f6;
	--wad-box-border          : #60a5fa;
	--wad-box-title-bg        : #dbeafe;
	--wad-box-title-color     : #1e3a8a;
	--wad-box-soft-bg         : #eff6ff;
	--wad-box-fill-title-color: #fff;
}
.wad-box--green {
	--wad-box-accent          : #22c55e;
	--wad-box-border          : #4ade80;
	--wad-box-title-bg        : #dcfce7;
	--wad-box-title-color     : #166534;
	--wad-box-soft-bg         : #f0fdf4;
	--wad-box-fill-title-color: #fff;
}
.wad-box--yellow {
	--wad-box-accent          : #eab308;
	--wad-box-border          : #facc15;
	--wad-box-title-bg        : #fef9c3;
	--wad-box-title-color     : #854d0e;
	--wad-box-soft-bg         : #fefce8;
	--wad-box-fill-title-color: #111827;
}
.wad-box--red {
	--wad-box-accent          : #ef4444;
	--wad-box-border          : #f87171;
	--wad-box-title-bg        : #fee2e2;
	--wad-box-title-color     : #991b1b;
	--wad-box-soft-bg         : #fef2f2;
	--wad-box-fill-title-color: #fff;
}
.wad-box--black {
	--wad-box-accent          : #111827;
	--wad-box-border          : #111827;
	--wad-box-title-bg        : #111827;
	--wad-box-title-color     : #fff;
	--wad-box-soft-bg         : #f3f4f6;
	--wad-box-fill-title-color: #fff;
}

/* simple */
.wad-box--simple { border: 1px solid var(--wad-box-border); }
.wad-box--simple .wad-box__title {
	background    : var(--wad-box-title-bg);
	border-bottom : 1px solid var(--wad-box-border);
	color         : var(--wad-box-title-color);
}

/* fill */
.wad-box--fill { border: 1px solid var(--wad-box-accent); }
.wad-box--fill .wad-box__title { background: var(--wad-box-accent); color: var(--wad-box-fill-title-color); }
.wad-box--fill .wad-box__body  { background: var(--wad-box-fill-body-bg); }

/* left-line */
.wad-box--left-line { border: 1px solid var(--wad-box-border); border-left: 4px solid var(--wad-box-accent); }
.wad-box--left-line .wad-box__title { color: var(--wad-box-accent); }

/* rounded */
.wad-box--rounded { border: 1px solid var(--wad-box-border); border-radius: 12px; background: var(--wad-box-soft-bg); }
.wad-box--rounded .wad-box__title { background: transparent; color: var(--wad-box-title-color); }

/* dashed */
.wad-box--dashed { border: 2px dashed var(--wad-box-border); }
.wad-box--dashed .wad-box__title { background: var(--wad-box-title-bg); border-bottom: 1px dashed var(--wad-box-border); color: var(--wad-box-title-color); }


/* fill */
.wad-box--fill .wad-box__title-icon { color: var(--wad-box-fill-title-color); }


/* ============================================================
 * リスト装飾
 * ============================================================ */
ul.wad-list,
ol.wad-list {
	list-style   : none !important;
	padding-left : 0 !important;
	margin       : 1em 0 !important;
}
ul.wad-list li,
ol.wad-list li {
	list-style     : none !important;
	margin         : 0 !important;
	position       : relative;
	display        : block;
	padding-left   : 1.6em !important;
	padding-top    : .2em;
	padding-bottom : .2em;
	line-height    : 1.7;
}
ul.wad-list li::before,
ol.wad-list li::before {
	position    : absolute;
	left        : 0;
	top         : 50%;
	transform   : translateY(-50%);
	font-size   : 1em;
	line-height : 1;
}

ul.wad-list--check li::before,
ol.wad-list--check li::before { content: '✅'; }
ul.wad-list--arrow li::before,
ol.wad-list--arrow li::before { content: '▶'; color: #3b82f6; }
ul.wad-list--star li::before,
ol.wad-list--star li::before { content: '⭐'; }
ul.wad-list--good li::before,
ol.wad-list--good li::before { content: '⭕'; color: #22c55e; }
ul.wad-list--bad li::before,
ol.wad-list--bad li::before { content: '❌'; }

/* ============================================================
 * ステップ形式
 * ============================================================ */
.wad-steps          { margin: 1.5em 0; }
.wad-steps__item    {
	display       : flex;
	gap           : 1em;
	align-items   : flex-start;
	position      : relative;
	padding-bottom: 1.5em;
}
.wad-steps__item:not(:last-child)::after {
	content    : '';
	position   : absolute;
	left       : 19px;
	top        : 40px;
	bottom     : 0;
	width      : 2px;
	background : #e5e7eb;
}
.wad-steps__number {
	width       : 40px;
	height      : 40px;
	border-radius: 50%;
	background  : #3b82f6;
	color       : #fff;
	font-weight : bold;
	display     : flex;
	align-items : center;
	justify-content: center;
	flex-shrink : 0;
	font-size   : .95em;
}
.wad-steps__content { flex: 1; 
    padding-top: 5px;
}
.wad-steps__title   { font-weight: bold; margin-bottom: .4em; display: block; }
.wad-steps__body    { color: #444; }

/* ============================================================
 * 画像フレーム
 * ============================================================ */
.wad-image {
	display    : inline-block;
	margin     : .5em auto;
	max-width  : 100%;
}
.wad-image img { display: block; max-width: 100%; }

.wad-image--border  img { border: 1px solid #ddd; }
.wad-image--rounded img { border: 1px solid #ddd; border-radius: var(--wad-radius); }
.wad-image--shadow  img { box-shadow: var(--wad-shadow); }

/* polaroid */
.wad-image--polaroid {
	background    : #fff;
	padding       : 8px 8px 2.5em;
	box-shadow    : var(--wad-shadow);
	border-radius : 2px;
}
.wad-image--polaroid figcaption {
	text-align  : center;
	font-size   : .85em;
	color       : #555;
	padding-top : .5em;
}

/* ============================================================
 * カラムレイアウト
 * ============================================================ */
.wad-columns {
	display : flex;
	gap     : 1.5em;
	margin  : 1.5em 0;
}
.wad-columns__col { flex: 1; min-width: 0; }

@media ( max-width: 767px ) {
	.wad-columns { flex-direction: column; }
}

/* ============================================================
 * ブログカード
 * ============================================================ */
.wad-blogcard {
	display          : flex;
	align-items      : center;
	gap              : 1em;
	text-decoration  : none;
	color            : inherit;
	margin           : 1.5em 0;
	position         : relative;
	overflow         : hidden;
	transition       : box-shadow .2s;
}
.wad-blogcard:hover { box-shadow: 0 4px 16px rgba(0,0,0,.15); }

.wad-blogcard__thumbnail {
	width      : 120px;
	height     : 80px;
	flex-shrink: 0;
	overflow   : hidden;
}
.wad-blogcard__thumbnail img {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
}
.wad-blogcard__body  { flex: 1; min-width: 0; padding: .75em; }
.wad-blogcard__site  { display: flex; align-items: center; gap: .4em; font-size: .8em; color: #888; margin-bottom: .3em; }
.wad-blogcard__site img { width: 16px; height: 16px; }
.wad-blogcard__title { display: block; font-weight: bold; margin-bottom: .3em; }
.wad-blogcard__desc  { display: block; font-size: .85em; color: #666; }

.wad-blogcard__label {
	position    : absolute;
	top         : 0;
	font-size   : .75em;
	padding     : .2em .6em;
	background  : #3b82f6;
	color       : #fff;
	border-radius: 0 0 4px 0;
}
.wad-blogcard__label--right { left: auto; right: 0; border-radius: 0 0 0 4px; }
.wad-blogcard__label--left  { left: 0; }

/* デザインプリセット */
.wad-blogcard--default  { border: 1px solid #e5e7eb; border-radius: var(--wad-radius); }
.wad-blogcard--simple   { border: 1px solid #e5e7eb; }
.wad-blogcard--border   { border: 2px solid #bbb; border-radius: var(--wad-radius); }
.wad-blogcard--shadow   { box-shadow: var(--wad-shadow); border-radius: var(--wad-radius); }
.wad-blogcard--minimal  { border-bottom: 1px solid #eee; }
.wad-blogcard--compact  .wad-blogcard__body { padding: .4em .75em; }
.wad-blogcard--compact  .wad-blogcard__thumbnail { width: 90px; height: 60px; }

@media ( max-width: 767px ) {
	.wad-blogcard { flex-direction: column; align-items: flex-start; }
	.wad-blogcard__thumbnail { width: 100%; height: 160px; }
}

/* ============================================================
 * マーカー強調
 * ============================================================ */
.wad-marker {
	background-repeat  : no-repeat;
	background-position: left center;
	background-size    : 0% 60%;
	transition         : background-size .6s ease;
	padding            : 0 .1em;
}
.wad-marker.is-animated { background-size: 100% 60%; }

.wad-marker--yellow { background-image: linear-gradient( to right, rgba(255,235,59,.8), rgba(255,235,59,.8) ); color: #222; }
.wad-marker--pink   { background-image: linear-gradient( to right, rgba(244,114,182,.5), rgba(244,114,182,.5) ); }
.wad-marker--blue   { background-image: linear-gradient( to right, rgba(147,197,253,.6), rgba(147,197,253,.6) ); }
.wad-marker--green  { background-image: linear-gradient( to right, rgba(134,239,172,.6), rgba(134,239,172,.6) ); }

/* ============================================================
 * 文字サイズ変更
 * ============================================================ */
.wad-text--large {
	font-size   : 1.5rem;
	font-weight : bold;
}
.wad-text--small { font-size: .85rem; }

/* ============================================================
 * 吹き出し
 * ============================================================ */
.wad-balloon {
	display       : flex;
	align-items   : flex-start;
	gap           : 1em;
	margin        : 1.5em 0;
}
.wad-balloon--right { flex-direction: row-reverse; }

.wad-balloon__icon {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : .4em;
	flex-shrink    : 0;
	width          : 64px;
}
.wad-balloon__icon img {
	width         : 60px;
	height        : 60px;
	border-radius : 50%;
	object-fit    : cover;
	display       : block;
}
.wad-balloon__name {
	font-size   : 10px;
	line-height : 1.2;
	color       : #666;
	display     : block;
	margin-top  : 2px;
	text-align  : center;
	font-weight : bold;
}
.wad-balloon-name-off .wad-balloon__name {
	display: none;
}

.wad-balloon__body {
	background    : #fff;
	border        : 1px solid #ddd;
	border-radius : var(--wad-radius);
	padding       : .75em 1em;
	position      : relative;
	flex          : 1;
}

/* 吹き出しの尻尾（左向き） */
.wad-balloon--left .wad-balloon__body::before {
	content        : '';
	position       : absolute;
	left           : -8px;
	top            : 16px;
	border-style   : solid;
	border-width   : 6px 8px 6px 0;
	border-color   : transparent #ddd transparent transparent;
}
.wad-balloon--left .wad-balloon__body::after {
	content        : '';
	position       : absolute;
	left           : -7px;
	top            : 16px;
	border-style   : solid;
	border-width   : 6px 8px 6px 0;
	border-color   : transparent #fff transparent transparent;
}

/* 吹き出しの尻尾（右向き） */
.wad-balloon--right .wad-balloon__body::before {
	content        : '';
	position       : absolute;
	right          : -8px;
	top            : 16px;
	border-style   : solid;
	border-width   : 6px 0 6px 8px;
	border-color   : transparent transparent transparent #ddd;
}
.wad-balloon--right .wad-balloon__body::after {
	content        : '';
	position       : absolute;
	right          : -7px;
	top            : 16px;
	border-style   : solid;
	border-width   : 6px 0 6px 8px;
	border-color   : transparent transparent transparent #fff;
}

@media ( max-width: 480px ) {
	.wad-balloon__icon { width: 48px; }
	.wad-balloon__icon img { width: 44px; height: 44px; }
}


/* コールアウトアイコン（フロント表示・絵文字モード） */
.wad-callout__icon {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	min-width       : 1.5em;
	min-height      : 1.5em;
	flex-shrink     : 0;
}

.wad-callout[data-wad-icon="info"] .wad-callout__icon:empty::before {
	content : 'ℹ️';
}
.wad-callout[data-wad-icon="point"] .wad-callout__icon:empty::before {
	content : '⭐';
}
.wad-callout[data-wad-icon="check"] .wad-callout__icon:empty::before {
	content : '✅';
}
.wad-callout[data-wad-icon="caution"] .wad-callout__icon:empty::before {
	content : '⚠️';
}
.wad-callout[data-wad-icon="warning"] .wad-callout__icon:empty::before {
	content : '❌';
}