@charset "UTF-8";

/* /////////////////////////////////////
   CotEditor Common Style Sheet
   
   author  : 1024jp <wolfrosch.com>
   site    : coteditor.com
   target  : all pages
   lastMod : 2026-04
  ////////////////////////////////////// */

/*___0.universal_reset_______________________________________________________*/

* {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-weight: inherit;
	font-style: inherit;
	font-size-adjust: from-font;
	text-rendering: optimizeLegibility;
	text-autospace: normal;
	text-spacing-trim: trim-start;
	box-sizing: border-box;
}
img {
	border: none;
	max-width: 100%;
	height: auto;
}
a {
	text-decoration: none;
	transition: background-color 0.3s;
}
ul li {
	list-style: none;
}



/*___1.common rule___________________________________________________________*/

/* color scheme */
:root {
	--background: light-dark(white, hsl(0,0%,12%));
	--text: light-dark(hsla(0,0%,0%,.8), hsla(0,0%,100%,.9));
	--secondary-text: light-dark(hsla(0,0%,0%,.67), hsla(0,0%,100%,.67));
	--tertiary-text: light-dark(hsla(0,0%,0%,.5), hsla(0,0%,100%,.5));
	--separator: light-dark(hsla(0,0%,0%,.1), hsla(0,0%,100%,.14));
	--code-background: light-dark(hsla(0,0%,0%,.02), hsla(0,0%,100%,.1));
	
	--accent: hsl(90,50%,50%);
	--link: light-dark(hsl(90,45%,45%), hsl(90,55%,60%));
	--link-background: light-dark(hsla(90,45%,45%,.2), hsla(90,55%,62%,.18));
	
	--information: light-dark(hsl(203,30%,25%), hsl(203,60%,85%));
	--information-background: light-dark(hsl(203,50%,97%), hsl(203,20%,20%));
}


/* anchors */
a:any-link {
	color: var(--link);
}
a:any-link:hover {
	background: var(--link-background);
}
a:not([href]) {
	color: inherit;
}
a > sup {
	color: var(--tertiary-text);
	font-size: 70%;
	margin-block: 0;
	margin-inline: 1px;
}


/* basic spacing */
main p,
main dd,
main li {
	line-height: 1.7;
}
main h1,
main h2,
main h3,
main h4,
main dt {
	line-height: 1.4;
}

main p {
	margin-block: 1em;
	margin-inline: 0;
}
section {
	margin-block: 2em 3em;
	margin-inline: 0;
}
section > section {
	margin-block: 1em;
	margin-inline: 0;
}

/* list marker */
main ul li {
	list-style-type: circle;
	margin-inline-start: 1.5em;
}
main li+li {
	margin-block-start: 0.2em;
}

/* table */
table {
	border-spacing: 0;
	border-collapse: collapse;
}
table tr > * {
	padding-block: 0.2em;
	padding-inline: 0.5em;
	line-height: 1.5;
}
table thead tr > * {
	font-weight: 500;
	border-block-end: 0.5px solid var(--text);
}
table tbody tr > * {
	border-block-end: 0.5px solid var(--separator);
}

/* code */
code {
	font: 94% Menlo, monospace;
	background-color: var(--code-background);
	border-radius: 0.3em;
	padding-block: 0.1em;
	padding-inline: 0.3em;
}
pre code {
	display: block;
	width: auto;
	min-width: 100%;
	padding-block: 0.3em;
	padding-inline: 1em;
	line-height: 1.6;
	border: 1px solid var(--separator);
}
pre {
	overflow-x: auto;
}

/* other styles */
strong {
	font-weight: bold;
}
dfn {
	font-style: italic;
}


/*___2.layout________________________________________________________________*/

/* body */
body {
	font: 15px -apple-system, 'Helvetica Neue', sans-serif;
	letter-spacing: 0.01em;
	color: var(--text);
	
	background: var(--background);
	padding-block: 15px;
	padding-inline: 20px;
}


/* header */
body > header {
	font: 200 18px/1.0 'Avenir', 'Helvetica Neue', sans-serif;
	letter-spacing: 0.05em;
	color: var(--secondary-text);
	min-height: 16px;
	position: relative;
}
body > header a {
	color: inherit !important;
	background: transparent !important;
	
	position: relative;
	transition: transform 0.3s ease;
	display: inline-block;
}
body > header a:any-link:hover {
	transform: translateY(-3px);
}
body > header > a:first-child {
	font-size: 26px;
}
body > header > a:first-child::before {
	display: inline-block;
	content: '';
	width: 48px;
	height: 48px;
	background: url('../img/appicon/128@2x.png');
	background-size: 48px;
	vertical-align: -14px;
	margin-inline-end: 4px;
	transition: transform 0.67s ease;
}
body > header > a:first-child:hover::before {
	transform: rotate(-360deg);
}
body > header > nav {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 0;
	padding-block: 1em;
	padding-inline: 2em;
}
body > header > nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 0.8em;
}
body > header > nav a[href*='x.com'] {
	content: url('parts/x_large.svg');
	height: 16px;
	vertical-align: -2px;
}
/* @media (prefers-color-scheme: dark) {
	body > header > nav a[href*='x.com'] {
		content: url('parts/x_large-dark.svg');
	}
} */


/* main */
main {
	margin-block: 30px;
	margin-inline: auto;
	width: 80%;
	max-width: 1000px;
}

/* footer */
body > footer {
	font-size: 13px;
	letter-spacing: 0.03em;
	text-align: center;
	margin-block-start: 40px;
}
body > footer p {
	opacity: 0.4;
}

/* sns */
aside.sns ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
aside.sns li {
	max-width: 90px;
}


/*___3.tooltip_______________________________________________________________*/

[role=tooltip]  { position:absolute; z-index:20;
                  padding-block:0.3em; padding-inline:0.6em;
                  box-shadow:0 2px 5px hsla(0,0%,0%,.4); text-align:start;
                  background-color:hsla(0,0%,20%,0.9); border-radius:8px;
                  border:none;
                  opacity:0; transition: opacity 0.3s;
                  font-family: -apple-system, sans-serif }
[role=tooltip]::after { content: ''; height:0; width:0;
                        position:absolute; inset-inline-start:40px; inset-block-end:-17px;
                        border:9px solid transparent;
                        border-block-start-color:hsl(0,0%,30%);
                        filter:drop-shadow(0px 2px 3px hsla(0,0%,0%,.2)) }
[role=tooltip] p    { color:hsl(0,0%,92%); line-height:1.2 }
[role=tooltip] span { color:hsl(0,0%,67%); font-size:92% }
[role=tooltip] p+p  { color:hsl(0,0%,75%); font-size:80%;
                      overflow-wrap:anywhere; margin-block-start:1px }
[role=tooltip] p::before  { opacity:0.9; margin-inline-end:5px; vertical-align:-1px; }

[role=tooltip].github p:first-child::before {
	content: url('parts/w_sns_github.svg');
}
[role=tooltip].note p {
	font-size: 90%;
	line-height: 1.4;
	text-align: justify;
	text-shadow: none;
	
	width: 280px;
	padding-block: 2px 3px;
	padding-inline: 2px;
}



/*___4.classes_______________________________________________________________*/

/* FQA */

dl.fqa {
	margin-block: 1em;
	margin-inline: 0;
}
dl.fqa > dt {
	font-size: 120%;
}
dl.fqa > * {
	text-indent: -1.8em;
	margin-inline-start: 1.8em;
	margin-block-end: 0.2em;
}
dl.fqa > dd + dt {
	margin-block-start: 1.5em;
}
dl.fqa > ::before {
	font: 200 20px/1.0 'Helvetica Neue', sans-serif;
	margin-inline-end: 0.3em;
}
dl.fqa > dt::before {
	content: 'Q.';
	color: hsl(200,60%,45%);
}
dl.fqa > dd::before {
	content: 'A.';
	color: hsl(30,75%,45%);
}
dl.fqa > dt:lang(tr)::before {
	content: 'S.';
}
dl.fqa > dd:lang(tr)::before {
	content: 'Y.';
}
dl.fqa > dd > ul,
dl.fqa > dd > ol,
dl.fqa > dd > dl {
	margin-block: 0.5em;
	margin-inline: 3em;
}
dl.fqa > dd > dl dt {
	font-weight: 500;
	display: list-item;
	list-style: circle inside;
	margin-inline-start: -1em;
}
dl.fqa > dd > dl dd {
	margin-block-end: 0.5em;
}

/* Addition */

p.addition {
	position: relative;
	text-indent: 0;
	padding-block: 0.8rem;
	padding-inline: 1.2rem;
	border-radius: 0.8rem;
	color: var(--information);
	background: var(--information-background);
}
p.addition > span:first-child {
	color: -apple-system-secondary-label;
}


/*___5.responsive____________________________________________________________*/

@media (max-width: 700px) {
	body {
		padding-block: 0.75rem;
		padding-inline: 1rem;
	}

	body > header {
		text-align: center;
		padding-block-start: 0.5em;
	}
	body > header > a:first-child {
		display: inline-block;
	}
	body > header > nav {
		position: static;
		padding-block: 1em 0;
		padding-inline: 0;
		text-align: center;
	}
	body > header > nav ul {
		justify-content: center;
		gap: 0.45em 1em;
	}

	main {
		width: 100%;
		max-width: 100%;
		margin-block: 1.5rem;
		margin-inline: auto;
	}

	pre code {
		padding-inline: 0.8em;
	}

	table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	[role=tooltip].note p {
		width: min(280px, calc(100vw - 48px));
	}
}

@media (max-width: 520px) {
	body {
		font-size: 14px;
		padding-inline: 0.75rem;
	}

	body > header {
		font-size: 16px;
	}
	body > header > a:first-child {
		font-size: 22px;
	}
	body > header > a:first-child::before {
		width: 40px;
		height: 40px;
		background-size: 40px;
		vertical-align: -11px;
	}

	main {
		margin-block: 1.25rem;
		margin-inline: auto;
	}
}